Documentation
Getting Started
jqxListMenu
jqxListMenu displays a collection of Unordered and Ordered Lists. By nesting child ul or ol inside list items, you can create nested lists.The first step is to create html page and add links to the javascript files and CSS dependencies to your project. The jqxListMenu plugin requires the following files:
<head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
The next step is to create a UL element within the body of the html document.
<ul id="list" data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP</li> <li>DNS</li> <li>FTP</li> <li>RTP</li> <li>DHCP</li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL</li> <li>TLS</li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS</li> <li>SPDY</li> </ol> </li> <li>Transport Layer <ol data-role="listmenu"> <li>TCP</li> <li>UDP</li> <li>SCTP</li> </ol> </li> <li>Network Layer <ol data-role="listmenu"> <li>IP</li> <li>ARP</li> <li>ICMP</li> </ol> </li> <li>Data Link Layer <ol data-role="listmenu"> <li>ATM</li> <li>SDLS</li> <li>LLC</li> </ol> </li> <li>Physical Layer <ol data-role="listmenu"> <li>EIA/TIA-232</li> <li>ITU-T V-Series</li> <li>DSL</li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP</li> <li>DNS</li> <li>FTP</li> <li>HTTP</li> <li>IMAP</li> <li>LDAP</li> <li>XMPP</li> <li>SSH</li> <li>RIP</li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP</li> <li>UDP</li> <li>SCTP</li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP</li> <li>ICMP</li> <li>ECN</li> </ol> </li> <li>Link layer <ol data-role="listmenu"> <li>ARP</li> <li>NDP</li> <li>DSL</li> </ol> </li> </ul> </li></ul>
<script type="text/javascript"> $(document).ready(function () { $('#list').jqxListMenu({ width: '50%', showHeader: true, showBackButton: true, showFilter: false }); }); </script>
To set a property (option), you need to pass the property name and value(s) in the jqxListMenu's constructor.
To get a property(option), you need to pass the property name to the jqxListMenu's constructor.$("#element").jqxListMenu({ showBackButton: true });
The data-role="listmenu" specifies that UL or LI will be rendered as a listmenu.var showBackButton = $("#element").jqxListMenu('showBackButton');
The data-role="header" specifies that a LI element will be rendered as a header of a listmenu.
The data-role="separator" specifies that a LI element will be rendered as a separator of a listmenu.
The data-role="content" specifies that an element will be used as a content container.
<ul data-role="listmenu"><li><div style="padding: 5px;" data-role="content"><table><tr><td><img width="50" height="50" src="../../images/janet.png" alt="" /></td><td><b>Janet Leverling</b></td></tr><tr><td>Title</td><td>Sales Representative</td></tr><tr><td>Notes</td><td>Janet has a BS degree in chemistry from Boston College (1984). She has also completeda certificate program in food retailing management. Janet was hired as a sales associatein 1991 and promoted to sales representative in February 1992.</td></tr><tr><td>Birth Date</td><td>27-Jan-69</td></tr><tr><td>Hire Date</td><td>15-Nov-94</td></tr><tr><td>Home Phone</td><td>(71) 555-4444</td></tr><tr><td>Address</td><td>Miner Rd.</td></tr><tr><td>Postal Code</td><td>WG2 7LT</td></tr><tr><td>City</td><td>London</td></tr><tr><td>Country</td><td>UK</td></tr></table></div></li></ul>
Basic ListMenu Sample
<!DOCTYPE html><html lang="en"><head> <title id='Description'>jqxListMenu supports nested lists. To create nested lists, add unordered or ordered lists inside list items. After that, set the data-role atribute of the unordered/ordered list to 'listmenu'.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#list').jqxListMenu({ width: 300, enableScrolling: false, showHeader: true, showBackButton: true, showFilter: false }); }); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head><body class='default'> <ul id="list" data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP</li> <li>DNS</li> <li>FTP</li> <li>RTP</li> <li>DHCP</li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL</li> <li>TLS</li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS</li> <li>SPDY</li> </ol> </li> <li>Transport Layer <ol data-role="listmenu"> <li>TCP</li> <li>UDP</li> <li>SCTP</li> </ol> </li> <li>Network Layer <ol data-role="listmenu"> <li>IP</li> <li>ARP</li> <li>ICMP</li> </ol> </li> <li>Data Link Layer <ol data-role="listmenu"> <li>ATM</li> <li>SDLS</li> <li>LLC</li> </ol> </li> <li>Physical Layer <ol data-role="listmenu"> <li>EIA/TIA-232</li> <li>ITU-T V-Series</li> <li>DSL</li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP</li> <li>DNS</li> <li>FTP</li> <li>HTTP</li> <li>IMAP</li> <li>LDAP</li> <li>XMPP</li> <li>SSH</li> <li>RIP</li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP</li> <li>UDP</li> <li>SCTP</li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP</li> <li>ICMP</li> <li>ECN</li> </ol> </li> <li>Link layer <ol data-role="listmenu"> <li>ARP</li> <li>NDP</li> <li>DSL</li> </ol> </li> </ul> </li> </ul></body></html>
