Open In App

jQuery Mobile Flipswitch Widget theme Option

Last Updated : 28 Jun, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops.
In this article, we will be using the jQuery Mobile Flipswitch Widget theme option to set the color scheme for the flipswitch widget. Its possible value is a character that lies between “a – z”. It accepts string type value and its default value is null, inherited from the parent.

Syntax:

$( ".selector" ).flipswitch({
  theme: string
});

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”//code.jquery.com/jquery-1.10.2.min.js”></script>
<script src=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

 

Example:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  
    <script src=
        "//code.jquery.com/jquery-1.10.2.min.js">
    </script>
  
    <script src=
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
  
    <script>
        $(document).ready(function () {
            $("#GFG").flipswitch({
                theme: "b"
            });
        });
    </script>
</head>
  
<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>GeeksforGeeks</h1>
            <h3>jQuery Mobile Flipswitch Widget theme Option</h3>
        </div>
  
        <div class="ui-field-contain">
            <form>
                <div data-role="fieldcontain">
                    <center>
                        <label for="GFG">
                            Flipswitch Checkbox:
                        </label>
                        <input type="checkbox" id="GFG" 
                            data-role="flipswitch">
                    </center>
                </div>
            </form>
        </div>
    </div>
</body>
  
</html>


Output:

Reference: https://api.jquerymobile.com/flipswitch/#option-theme



Similar Reads

jQuery Mobile Flipswitch Widget defaults Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget defaults Option with true value to set the other widgets options that have default values and cause widget autoenhancement code to omit the step whe
1 min read
jQuery Mobile Flipswitch Widget corners Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget corners Option to set the corner of border-radius. It accepts boolean type value and its default value is true. Syntax: $( ".selector" ).flipswitch(
1 min read
jQuery Mobile Flipswitch Widget onText Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget onText Option to set the label text on the flip switch when it is in the "ON" state. It accepts string type value and its default value is "On". Syn
1 min read
jQuery Mobile Flipswitch Widget offText Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget offText Option to set the label text on flipswitch when flipswitch is in "OFF" state. It accepts string type value and its default value is "Off". S
1 min read
jQuery Mobile Flipswitch Widget mini Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget mini option to display the compact flipswitch widget. If this option value is set to true, it will display the compact version of the button i.e. th
1 min read
jQuery Mobile Flipswitch Widget enhanced Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget enhanced Option that indicates the markup that is necessary for a flipswitch widget that has been provided as part of the original markup. It accept
1 min read
jQuery Mobile Flipswitch Widget disabled Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Flipswitch Widget disabled Option to disable the flipswitch widget. It accepts boolean type value and its default value is false. Syntax: $( ".selector" ).flipswitch(
1 min read
jQuery Mobile Flipswitch Widget Complete Reference
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. Flipswitch is an attractive option of checkbox or two-option select menu which is toggle by click and swipe. jQuery Mobile Flipswitch Widget Options jQuery Mobile Flipswitch classes OptionjQuery Mobile Flipswitch c
1 min read
jQuery Mobile Button Widget theme Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Button Widget theme Option to set the theme (button color) of the button. Syntax: $("selector").button({ theme: "b" }); CDN Link: First, add jQuery Mobile scripts
1 min read
jQuery Mobile Popup Widget theme Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Popup Widget theme option to set the color scheme for the popup contents. Syntax: $("selector").popup({ theme: "b" }); CDN Link: First, add jQuery Mobile scripts
1 min read