How to create Theme Disable flip toggle switch using jQuery Mobile ?

How to create a Theme flip toggle switch using jQuery Mobile ?

Last Updated : 23 Dec, 2020

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 creating a Theme flip toggle switch using jQuery Mobile.

The theme can be specified using the "data-track-theme" and the "data-theme" attributes of the toggle switch. The values that can be specified in these attributes are different available color swatches that each give a different look.

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

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

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <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-1.11.1.min.js">
    </script>

    <script src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h4>
            Theme Flip toggle switch
            using jQuery Mobile
        </h4>
    </center>
    
    <form>
        <label for="geeks-1">
            Flip toggle switch
        </label>

        <select name="geeks-1" id="geeks-1"
            data-role="slider" 
            data-track-theme="a" 
            data-theme="b">
            
            <option value="off">Off</option>
            <option value="on">On</option>
        </select>
    </form>
</body>

</html>

Output:

How to create Theme Disable flip toggle switch using jQuery Mobile ?

taran910

Improve

Article Tags :

Similar Reads

How to create Mini Theme flip toggle switch using jQuery Mobile ?

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 making Mini Theme flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link re

How to create Theme Disable flip toggle switch using jQuery Mobile ?

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 making Theme Disable flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link

How to create Basic flip toggle switch using jQuery Mobile ?

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 making a basic flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=

How to create Mini flip toggle switch using jQuery Mobile ?

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 making a Mini flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="

How to create Disable flip toggle switch using jQuery Mobile ?

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 making Disable flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="

How to create a Label hidden flip toggle switch using jQuery Mobile ?

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 making label hidden flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link

How to make Theme Fieldcontain flip toggle switch using jQuery Mobile ?

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 making Theme Fieldcontain flip toggle switch using jQuery Mobile. The theme can be specified using the "data-track-theme" and the "data-

How to create Mini Disable flip toggle switch using jQuery Mobile ?

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 making a mini disabled flip toggle switch using jQuery Mobile. Approach: First, add jQuery mobile scripts needed for your project. <l

How to create Fieldcontain flip toggle switch using jQuery Mobile ?

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 making Fieldcontain flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link

How to create Mini Label hidden flip toggle switch using jQuery Mobile ?

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 making Mini Label hidden flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <