jQWidgets jqxListMenu autoSeparators Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxListMenu is a jQuery widget that is used to display a collection of Ordered and Unordered Lists. We can create a nested list by using the ordered and unordered list.
The autoSeparators property is used to set or return whether the auto separators will be generated or not. It is a sequence of list items with equal start characters. The alternative of this property is data-auto-separators=”true”. It accepts boolean type values and its default value is false.
Syntax:
-
Set the autoSeparators property.
$('selector').jqxListMenu({ autoSeparators: Boolean }); -
Return the autoSeparators property.
var autoSeparators = $('selector').jqxListMenu('autoSeparators');
Linked Files: Download jQWidgets from the link https://www.jqwidgets.com/download/. In the HTML file, locate the script files in the downloaded folder.
<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/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.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>
The below example illustrates the jqxListMenu autoSeparators property in jQWidgets.
Example:
HTML
<!DOCTYPE html> <html lang="en"> <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/jqx-all.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdata.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> <style> h1, h3 { text-align: center; } #GFG { width: 100%; margin: 0 auto; } </style> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> jQWidgets jqxListMenu autoSeparators Property </h3> <div id="GFG" style="width: 300px;"> <ul id="list" data-role="listmenu"> <li>Web Technology <ul data-role="listmenu"> <li>Frontend Development <ul data-role="listmenu"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> </ul> </li> <li>Backend Development <ul data-role="listmenu"> <li>PHP</li> <li>Node.js</li> <li>Python</li> <li>Java</li> </ul> </li> </ul> </li> <li>GeeksforGeeks Programming <ul data-role="listmenu"> <li>C++</li> <li>Java</li> <li>Python</li> </ul> </li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { $('#list').jqxListMenu({ width: 300, height: 250, showHeader: true, showBackButton: true, showFilter: false, autoSeparators: true }); }); </script> </body> </html> |
Output:
Please Login to comment...