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= 
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script 
          src= 
"http://code.jquery.com/jquery-2.1.3.js"> 
    </script> 
    <script 
          src= 
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"> 
    </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>