Open In App

jQuery Mobile Flipswitch create Event

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 12 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads