jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" /> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../../scripts/documentation.js"></script> <meta name="keywords" content="jQuery, Menu, MainMenu, jqxMenu, Context Menu, Vertical Menu, Horizontal Menu, Menu Widget, Web Menu, Top Menu, jquery mobile menu, javascript mobile menu" /> <meta name="description" content="This page represents the help documentation of the jqxMenu widget(includes Menu, Context Menu and Vertical Menu)." /> <title>jqxMenu API Reference></title> <script type="text/javascript"> $(document).ready(function () { $(".documentation-option-type-click").click(function (event) { $(event.target).parents('tr').next().find(".property-content").toggle(); }); }); </script> </head> <body> <div id="properties"> <h2 class="documentation-top-header">Properties</h2> <table class="documentation-table"> <tr> <th>Name </th> <th>Type </th> <th>Default </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>animationShowDuration</span> </td> <td> <span>Number</span> </td> <td>350 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the duration of the show animation. </p> <h4>Code example</h4> <p> Set the <code>animationShowDuration</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({ animationShowDuration: 200 });</code></pre> <p> Get the <code>animationShowDuration</code> property. </p> <pre><code>var animationShowDuration = $('#jqxMenu').jqxMenu('animationShowDuration');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Ejddy/">animationShowDuration is set to 3000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>animationHideDuration</span> </td> <td> <span>Number</span> </td> <td>250 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the duration of the hide animation. </p> <h4>Code example</h4> <p> Set the <code>animationHideDuration</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({ animationHideDuration: "fast" });</code></pre> <p> Get the <code>animationHideDuration</code> property. </p> <pre><code>var animationHideDuration = $('#jqxMenu').jqxMenu('animationHideDuration');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gHTaF/">animationHideDuration is set to 3000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>animationHideDelay</span> </td> <td> <span>Number</span> </td> <td>500 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the delay before the start of the hide animation. </p> <h4>Code example</h4> <p> Set the <code>animationHideDelay</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({ animationHideDelay: 500 });</code></pre> <p> Get the <code>animationHideDelay</code> property. </p> <pre><code>var animationHideDelay = $('#jqxMenu').jqxMenu('animationHideDelay');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/geMg9/">animationHideDelay is set to 3000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>animationShowDelay</span> </td> <td> <span>Number</span> </td> <td>200 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the delay before the start of the show animation. </p> <h4>Code example</h4> <p> Set the <code>animationShowDelay</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({ animationShowDelay: 500 });</code></pre> <p> Get the <code>animationShowDelay</code> property. </p> <pre><code>var animationShowDelay = $('#jqxMenu').jqxMenu('animationShowDelay');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HB7M8/">animationShowDelay is set to 300</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span24'>autoCloseInterval</span> </td> <td> <span>Number</span> </td> <td>10000 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the time interval after which all opened items will be closed. When you open a new sub menu, the interval is cleared. If you want to disable this automatic closing behavior of the jqxMenu, you need to set the autoCloseInterval property to 0. </p> <h4>Code example</h4> <p> Set the <code>autoCloseInterval</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({ autoCloseInterval: 0 });</code></pre> <p> Get the <code>autoCloseInterval</code> property. </p> <pre><code>var autoCloseInterval = $('#jqxMenu').jqxMenu('autoCloseInterval');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wMLJs/">autoCloseInterval is set to 300</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>autoSizeMainItems</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Auto-Sizes the jqxMenu's main items when the menu's mode is 'horizontal'. </p> <h4>Code example</h4> <p> Set the <code>autoSizeMainItems</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({autoSizeMainItems: false}); </code></pre> <p> Get the <code>autoSizeMainItems</code> property. </p> <pre><code>var autoSizeMainItems = $('#jqxMenu').jqxMenu('autoSizeMainItems');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/C6efq/">autoSizeMainItems is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>autoCloseOnClick</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Automatically closes the opened popups after a click. </p> <h4>Code example</h4> <p> Set the <code>autoCloseOnClick</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({autoCloseOnClick: false}); </code></pre> <p> Get the <code>autoCloseOnClick</code> property. </p> <pre><code>var autoCloseOnClick = $('#jqxMenu').jqxMenu('autoCloseOnClick');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dhSsb/">autoCloseOnClick is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span13'>autoOpenPopup</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Opens the Context Menu when the right-mouse button is pressed. When this property is set to false, the <code>Open</code> and <code>Close</code> functions can be used to open and close the Context Menu. </p> <h4>Code example</h4> <p> Set the <code>autoOpenPopup</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({autoOpenPopup: false}); </code></pre> <p> Get the <code>autoOpenPopup</code> property. </p> <pre><code>var autoOpenPopup = $('#jqxMenu').jqxMenu('autoOpenPopup');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/A7K6Z/">autoOpenPopup is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span14'>autoOpen</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Opens the top level menu items when the user hovers them. </p> <h4>Code example</h4> <p> Set the <code>autoOpen</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({autoOpen: false}); </code></pre> <p> Get the <code>autoOpen</code> property. </p> <pre><code>var autoOpen = $('#jqxMenu').jqxMenu('autoOpen');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UK2Ud/">autoOpen is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span23'>clickToOpen</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Opens an item after a click by the user. </p> <h4>Code example</h4> <p> Set the <code>clickToOpen</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({clickToOpen: true}); </code></pre> <p> Get the <code>clickToOpen</code> property. </p> <pre><code>var clickToOpen = $('#jqxMenu').jqxMenu('clickToOpen');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/56NZQ/">clickToOpen is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span12'>disabled</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Enables or disables the jqxMenu. </p> <h4>Code example</h4> <p> Set the <code>disabled</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({disabled: false}); </code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxMenu').jqxMenu('disabled');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4fYGP/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span22'>enableHover</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Enables or disables the hover state. </p> <h4>Code example</h4> <p> Set the <code>enableHover</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({enableHover:false}); </code></pre> <p> Get the <code>enableHover</code> property. </p> <pre><code>var enableHover = $('#jqxMenu').jqxMenu('enableHover');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Dxjue/">enableHover is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>easing</span> </td> <td> <span>String</span> </td> <td>easeInOutSine </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the animation's easing to one of the JQuery's supported easings. </p> <h4>Code example</h4> <p> Set the <code>easing</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({ easing: 'easeInOutSine' });</code></pre> <p> Get the <code>easing</code> property. </p> <pre><code>var easing = $('#jqxMenu').jqxMenu('easing');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BV8uM/">easing is set to 'linear'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>height</span> </td> <td> <span>Number/String</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxMenu's height. </p> <h4>Code example</h4> <p> Set the <code>height</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({ height: '100px' });</code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxMenu').jqxMenu('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/q6Ux3/">height is set to 30</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span31'>keyboardNavigation</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Enables or disables the jqxMenu's keyboard navigation. </p> <h4>Code example</h4> <p> Set the <code>keyboardNavigation</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({keyboardNavigation: true}); </code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var keyboardNavigation = $('#jqxMenu').jqxMenu('keyboardNavigation');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fwxfuwd1/">keyboardNavigation is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span26'>minimizeWidth</span> </td> <td> <span>String</span> </td> <td>'auto' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxMenu's minimizeWidth. That width determines the minimum browser window's width when the Menu will switch from normal to minimized mode and the Menu's width is in percentages. Set it to null, if you want to disable that behavior. Note: jqxMenu automatically switches to minimized mode, when it is displayed on a touch device. By setting the property to null, you will disable that behavior, too. </p> <h4>Code example</h4> <p> Set the <code>minimizeWidth</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({ minimizeWidth: 250 });</code></pre> <p> Get the <code>minimizeWidth</code> property. </p> <pre><code>var minimizeWidth = $('#jqxMenu').jqxMenu('minimizeWidth');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/w68qW/">minimizeWidth is set to 450</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>mode</span> </td> <td> <span>String</span> </td> <td>horizontal </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the menu's display mode. </p> <b>Possible Values:</b> <br /> <pre><code>'horizontal'</code></pre> <pre><code>'vertical'</code></pre> <pre><code>'popup'</code></pre> <h4>Code example</h4> <p> Set the <code>mode</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({ mode: "vertical" });</code></pre> <p> Get the <code>mode</code> property. </p> <pre><code>var mode = $('#jqxMenu').jqxMenu('mode');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jmAuH/">mode is set to 'vertical'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span73'>popupZIndex</span> </td> <td> <span>Number</span> </td> <td>20000 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the popup's z-index. </p> <h4>Code example</h4> <p> Set the <code>popupZIndex</code> property. </p> <pre><code>$("#jqxMenu").jqxMenu({popupZIndex: 999999});</code></pre> <p> Get the <code>popupZIndex</code> property. </p> <pre><code>var zIndex = $('#jqxMenu').jqxMenu('popupZIndex'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BBpZC/">popupZIndex is set to 99999</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span51'>rtl</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p>Sets or getsa value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p> <h4>Code example</h4> <p> Set the <code>rtl</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({rtl : true}); </code></pre> <p> Get the <code>rtl</code> property. </p> <pre><code>var rtl = $('#jqxMenu').jqxMenu('rtl'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rdp2J/">rtl is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>source</span> </td> <td> <span>Object</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Specifies the jqxMenu's data source. Use this property to populate the jqxMenu. </p> Each menu item may have following fields: <br /> Item Fields <ul> <li>label - item's label.</li> <li>value - item's value.</li> <li>html - item's html. The html to be displayed in the item.</li> <li>id - item's id.</li> <li>items - array of sub items.</li> <li>subMenuWidth - sets the sub menu's width.</li> <li>disabled - determines whether the item is enabled/disabled.</li> </ul> <h4>Code examples</h4> <p> Initialize a jqxMenu with the <code>source</code> property specified. </p> <pre><code> var source = [ { label: "Item 1", expanded: true, items: [ { label: "Item 1.1" }, { label: "Item 1.2", selected: true } ] }, { label: "Item 2" }, { label: "Item 3" }, { label: "Item 4", items: [ { label: "Item 4.1" }, { label: "Item 4.2" } ] }, { label: "Item 5" }, { label: "Item 6" }, { label: "Item 7" } ]; // create jqxMenu $('#jqxMenu').jqxMenu({ source: source, height: '30px', width: '330px'}); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LyXGC/">source is set to source</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span63'>theme</span> </td> <td> <span>String</span> </td> <td>'' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets the widget's theme. </p> jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following: <ul> <li>Include the theme's CSS file after jqx.base.css.<br /> The following code example adds the 'energyblue' theme. <pre><code> <pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" /> </code></pre> </code></pre> </li> <li>Set the widget's theme property to 'energyblue' when you initialize it. </li> </ul> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XZu9n/">theme is set to 'energyblue'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>width</span> </td> <td> <span>Number/String</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxMenu's width. </p> <h4>Code example</h4> <p> Set the <code>width</code> property. </p> <pre><code>$('#jqxMenu').jqxMenu({ width: '250px' });</code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxMenu').jqxMenu('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/95qpW/">width is set to 450</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Events</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span15'>closed</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when any of the jqxMenu Sub Menus is closed. </p> <h4>Code example</h4> <p> Bind to the <code>closed</code> event by type: jqxMenu. </p> <pre><code>$('#jqxMenu').on('closed', function () { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/M7Unp/">Bind to the closed event by type:jqxMenu </a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span16'>itemclick</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when a menu item is clicked. </p> <h4>Code example</h4> <p> Bind to the <code>itemclick</code> event by type: jqxMenu. </p> <pre><code>$('#jqxMenu').on('itemclick', function (event) { // get the clicked LI element. var element = event.args; }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/x9dbx/">Bind to the itemclick event by type:jqxMenu </a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span17'>initialized</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered after the menu is initialized. </p> <h4>Code example</h4> <p> Bind to the <code>initialized</code> event by type: jqxMenu. </p> <pre><code>$('#jqxMenu').on('initialized', function () { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/V4MFK/">Bind to the initialized event by type:jqxMenu </a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span27'>shown</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when any of the jqxMenu Sub Menus is displayed. </p> <h4>Code example</h4> <p> Bind to the <code>shown</code> event by type: jqxMenu. </p> <pre><code>$('#jqxMenu').on('shown', function () { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9bewK/">Bind to the shown event by type:jqxMenu </a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Methods</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span37'>closeItem</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Closes a menu item. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>itemID</em></td> <td>String</td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code example</h4> <p> Invoke the <code>closeItem</code> method. </p> <pre><code>$('#jqxMenu').jqxMenu('closeItem', menuItemId);</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vRjng/">closes an item in the jqxMenu </a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span20'>close</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Closes the menu (only in context menu mode). </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code example</h4> <p> Invoke the <code>close</code> method. </p> <pre><code>$("#jqxMe