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:

The next step is to create a UL element within the body of the html document. The last step is to select the UL element and to build the widget by calling the jqxListMenu constructor.
To set a property (option), you need to pass the property name and value(s) in the jqxListMenu's constructor.

$("#element").jqxListMenu({ showBackButton: true });
 

To get a property(option), you need to pass the property name to the jqxListMenu's constructor.

var showBackButton = $("#element").jqxListMenu('showBackButton');
 

The data-role="listmenu" specifies that UL or LI will be rendered as a listmenu.
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 completed
 a certificate program in food retailing management. Janet was hired as a sales associate
 in 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

The result of the above code is:

[フレーム]