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.
<!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:
Reference: https://api.jquerymobile.com/flipswitch/#event-create