Skip to content
Related Articles

Related Articles

jQuery Mobile Flipswitch create Event

Improve Article
Save Article
  • Last Updated : 12 Jan, 2022
Improve Article
Save Article

jQuery Mobile is a JavaScript library built on top of jQuery. It is used to build responsive and accessible websites and web apps for devices with different screen sizes like smartphones, tablets, and desktops. 

In this article, we will be using the jQuery Mobile Flipswitch create event which triggers when the Flipswitch is created.

Syntax:

  • Initialize the Flipswitch with create event specified:

    $( ".selector" ).flipswitch({
      create: function( event, ui ) {
          // Your Code here.
      }
    });
  •  

  • Bind an event listener to the flipswitchcreate event:

    $( ".selector" ).on( "flipswitchcreate", function( event, ui ) {} );

Parameters: It accepts a callback function that holds two parameters:

  • event: It accepts Event type value.
  • ui: It accepts Object type value. The ui object can be empty but used for consistency with other events across the library.

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: The below example demonstrates the use of Flipswitch create an event. When the Flipswitch creates event fires, an alert box with the message “Flipswitch creates event triggered.” appears on the screen.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksForGeeks - FlipSwitch create event</title>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1" />
    <link rel="stylesheet"
          href=
    <script 
          src=
    </script>
    <script 
          src=
    </script>
  
</head>
  
<body>
    <div data-role="page" id="page">
        <div data-role="header">
            <h1 style="color: green;">GeeksforGeeks</h1>
            <h3>Flipswitch Widget create event</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>
  
    <script>
        $("#GFG").flipswitch({
             // Initialize the flipswitch with create
              // callback specified.
            create: function (event, ui) {
                alert("Flipswitch create event triggered.");
            }
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Flipswitch create Event

Reference: https://api.jquerymobile.com/flipswitch/#event-create


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!