jQuery Mobile Column-Toggle Table classes.popup Option
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 classes.popup Option. In this option, the specified class is assigned to the column chooser popup.
Note: This classes option is only configurable via JavaScript because it expects an object literal value. It’s having two properties defining the structural class names that the plugin uses.
Syntax:
<div class="ui-table-columntoggle-popup"> // content </div>
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 classes.popup Option.
HTML
<!doctype html><html lang="en"> <head> <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 classes.popup Option</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> <td> data-rel="external"> WWW.GeeksforGeeks.org </a> </td> <td>2010</td> </tr> </tbody> </table> </div> <div id="log"> <h2> classes.popup </h2> <h3> Default: "ui-table-columntoggle-popup" </h3> </div> </div> </center> <script> $(document).ready(function () { $("#GFG").table(); </script></body> </html> |
Output:
Reference: https://api.jquerymobile.com/table-columntoggle/#option-classes.popup
Please Login to comment...