jQuery Mobile Column-Toggle Table create Event
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 Column-Toggle Table create Event. This event is triggered when the Column-Toggle Table widget is created.
Syntax:
Initializing the Column-Toggle Table create event.
$( ".selector" ).table({
create: function( event, ui ) {}
});
-
Binding an event listener to the tablecreate event.
$( ".selector" ).on( "tablecreate", function( event, ui ) {} );
Parameters: It accepts a callback function that has 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.
CDN Link: First, add jQuery Mobile scripts needed for your project.
<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>
Example: This example describes the jQuery Mobile Column-Toggle Table create Event.
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.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> <script src= "//code.jquery.com/jquery-3.2.1.min.js"> </script> <script src= "//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"> </script> </head> <body> <center> <div data-role="page"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>jQuery Mobile Column-Toggle Table create Event</h3> <div id="log"></div> <div data-role="header"> </div> <div role="main"> <table data-role="table" id="GFG" data-mode="columntoggle"> <thead> <tr> <th data-priority="1">Company Name</th> <th data-priority="persist">Website</th> <th data-priority="2">Year</th> </tr> </thead> <tbody> <tr> <th>GeeksforGeeks</th> data-rel="external">WWW.GeeksforGeeks.org</a> </td> <td>2010</td> </tr> </tbody> </table> </div> </div> </center> <script> $(document).ready(function () { $("#GFG").table({ create: function (event, ui) { } }); $("#GFG").on("tablecreate", function (event, ui) { }); $("#log").html('Column-Toggle Table widget has been created.'); }); </script> </body> </html> |
Output:
jQuery Mobile Column-Toggle Table create Event
Reference: https://api.jquerymobile.com/table-columntoggle/#event-create
Please Login to comment...