The first step is to create html page and add links to the javascript files and
css dependencies to your project.
The jqxListMenu element requires the following
files:
The next step is to add the html element within the body of the html page.<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script><script type="text/javascript" src="../jqwidgets/jqxcore.js"></script><script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script><script type="text/javascript" src="../jqwidgets/jqxdata.js"></script><script type="text/javascript" src="../jqwidgets/jqxlistmenu.js"></script>
The last step is to initialize the element settings:<jqx-list-menu settings="elementSettings"></jqx-list-menu>
To call a function(method), you need to pass the method name and parameters(if any) in the jqxListMenu's instance.<script type="text/javascript">JQXElements.settings["elementSettings"] ={autoSeparators:true,enableScrolling:true,showHeader:true, placeHolder:"Find Contact",alwaysShowNavigationArrows:true, theme:"light"}</script>
To get the result of a function after calling it, you can use the following syntax: To set a property(option), you need to use the property name and value(s) along with the jqxListMenu's instance.<script>window.onload = function () {var element = document.querySelector("jqx-list-menu");element.back();}</script>
You can also set properties of HTML Elements by using Attributes. Traditionally, attributes are used to set the initial state of an element. Properties with camelCase naming have dash-based attributes. For example: A property "dataSource" will have an attribute called "data-source".window.onload = function() {document.querySelector("jqx-list-menu").alwaysShowNavigationArrows = false;}
window.onload = function() {var propertyValue = document.querySelector("jqx-list-menu").alwaysShowNavigationArrows;}
Event binding can be defined in the HTML as an attribute. The syntax is: 'on-' and the event's name. Event Names with camelCase naming have dash-based attributes. The attribute's value is the event handler's name. The addEventListener function can also be used for event binding.
{{EVENTEXAMPLE}}
<!DOCTYPE html><html lang="en"><head><title id='Description'>List Menu Custom Element</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /><link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /><link rel="stylesheet" href="../../jqwidgets/styles/jqx.light.css" type="text/css" /><link rel="stylesheet" href="../../styles/demos.css" type="text/css" /><script type="text/javascript" src="../../scripts/webcomponents-lite.min.js"></script><script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script><script type="text/javascript" src="../../jqwidgets/jqxcore.elements.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" src="../../jqwidgets/jqxlistmenu.js"></script><script type="text/javascript" src="../../scripts/demos.js"></script><style type="text/css">#list img {width: 50px;height: 55px;}#list div {margin-top: -35px;margin-left: 80px;}.jqx-listmenu-item {padding: 0px;min-height: 57px;}html,body {overflow-y:auto;}</style><script>JQXElements.settings["listMenuSettings"] ={autoSeparators:true,enableScrolling:true,showHeader:true, placeHolder:"Find Contact",alwaysShowNavigationArrows:true, theme:"light"}</script></head><body><jqx-list-menu settings="listMenuSettings"><ul data-role="listmenu"><li><img src="../../images/andrew.png" alt="" /><div>Andrew Fuller</div><ul data-role="listmenu"><li><div style="padding: 5px;" data-role="content"><table><tr><td><img width="50" height="50" src="../../images/andrew.png" alt="" /></td><td><b>Andrew Fuller</b></td></tr><tr><td>Title</td><td>Sales Representative</td></tr><tr><td>Notes</td><td>"Andrew received his BTS commercial in 1974 and a Ph.D. in international marketingfrom the University of Dallas in 1981. He is fluent in French and Italian and readsGerman. He joined the company as a sales representative, was promoted to sales managerin January 1992 and to vice president of sales in March 1993. Andrew is a memberof the Sales Management Roundtable, the Seattle Chamber of Commerce, and the PacificRim Importers Association.</td></tr><tr><td>Birth Date</td><td>19-Feb-52</td></tr><tr><td>Hire Date</td><td>14-Aug-92</td></tr><tr><td>Home Phone</td><td>(206) 555-9482</td></tr><tr><td>Address</td><td>908 W. Capital Way.</td></tr><tr><td>Postal Code</td><td>98401</td></tr><tr><td>City</td><td>Tacoma</td></tr><tr><td>Country</td><td>USA</td></tr></table></div></li></ul></li><li><img src="../../images/anne.png" alt="" /><div>Anne Dodsworth</div><ul data-role="listmenu"><li><div style="padding: 5px;" data-role="content"><table><tr><td><img width="50" height="50" src="../../images/anne.png" alt="" /></td><td><b>Anne Dodsworth</b></td></tr><tr><td>Title</td><td>Inside Sales Coordinator</td></tr><tr><td>Notes</td><td>Anne has a BA degree in English from St. Lawrence College. She is fluent in Frenchand German.</td></tr><tr><td>Birth Date</td><td>27-Jan-66</td></tr><tr><td>Hire Date</td><td>15-Nov-94</td></tr><tr><td>Home Phone</td><td>(71) 555-5598</td></tr><tr><td>Address</td><td>7 Houndstooth 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></li><li><img src="../../images/janet.png" alt="" /><div>Janet Leverling</div><ul data-role="listmenu"><li><div style="padding: 5px;" data-role="content"><table><tr><td><img width=
