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
Last Updated :
26 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...