jQuery Mobile Flipswitch wrapperClass Option
Last Updated :
12 Jan, 2022
jQuery Mobile is a set of HTML5 based user interface systems developed to create responsive and accessible content for smartphones, tablets, and desktops. It is built on top of jQuery.
In this article, we will be using the jquery Mobile Flipswitch wrapperClass option. It is used to specify one or more space-separated class names for the div wrapping the Flipswitch.
Syntax:
Initialize the Flipswitch with wrapperClass option specified:
$( ".selector" ).flipswitch({
wrapperClass: "custom-class1 custom-class2"
});
Get the wrapperClass option:
var wrapperClass = $( ".selector" )
.flipswitch( "option", "wrapperClass" );
Set the wrapperClass option:
$( ".selector" ).flipswitch( "option",
"wrapperClass", "custom-class-name" );
CDN Links:
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>
Example: In the below example, we have initialized flipswitch with wrapperClass option specified as “gfg-custom-class“.
HTML
<!DOCTYPE html>
< html >
< head >
< title >GeeksForGeeks - Flipswitch wrapperClass option</ title >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" />
< link rel = "stylesheet"
href =
< script
src =
</ script >
< script
src =
</ script >
< script >
$("#GFG").flipswitch({
// pass custom class name
// to wrapperClass option.
wrapperClass: "gfg-custom-class",
});
</ script >
</ head >
< body >
< div data-role = "page" id = "page" >
< div data-role = "header" >
< h1 style = "color: green;" >GeeksforGeeks</ h1 >
< h3 >Flipswitch Widget wrapperClass option</ h3 >
</ div >
< div class = "ui-field-contain" >
< form >
< div data-role = "fieldcontain" >
< center >
< label for = "GFG" > Flipswitch: </ label >
< input type = "checkbox"
id = "GFG" data-role = "flipswitch" />
</ center >
</ div >
</ form >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://api.jquerymobile.com/flipswitch/#option-wrapperClass
Share your thoughts in the comments
Please Login to comment...