Menu

Override defaults with $.fn.menu.defaults.

Usage Example

Create Menu

Create menu via markup should add 'easyui-menu' class to <div/> markup. Each menu item is created via <div/> markup. We can add 'iconCls' attribute to menu item to define a icon that will display on left of menu item. Add 'menu-sep' class to menu item will generate a menu seperator.

  1. <div id="mm" class="easyui-menu" style="width:120px;">  
  2.     <div>New</div>  
  3.     <div>  
  4.         <span>Open</span>  
  5.         <div style="width:150px;">  
  6.             <div><b>Word</b></div>  
  7.             <div>Excel</div>  
  8.             <div>PowerPoint</div>  
  9.         </div>  
  10.     </div>  
  11.     <div iconCls="icon-save">Save</div>  
  12.     <div class="menu-sep"></div>  
  13.     <div>Exit</div>  
  14. </div>  

Create menu programatically and listening the 'onClick' event.

  1. $('#mm').menu({  
  2.     onClick:function(item){  
  3.         //...  
  4.     }  
  5. });  

Show Menu

When menu is created, it's hidden and not visible. Call 'show' method to display menu.

  1. $('#mm').menu('show', {  
  2.   left: 200,  
  3.   top: 100  
  4. });  

 

Properties

Name Type Description Default
zIndex number Menu z-index style,increase from it. 110000
left number Menu left position. 0
top number Menu top position. 0

Events

Name Parameters Description
onShow none Fires after menu is showed.
onHide none Fires after menu is hidden.
onClick item Fires when the menu item is clicked.

Methods

Name Parameter Description
show pos Show a menu on specified position.
pos parameter have two properties:
left: the new left position.
top: the new top position.
hide none Hide a menu.
getItem itemEl Get the menu item data and return it, the data contains the following properties:
target: DOM object, the menu item.
id: string, the element's id attribute.
text: string, the menu item text.
href: string, the url location.
disabled: boolean, the menu item is disabled or not.
onclick: function, the function to be executed when users click the menu item.
iconCls: string, the icon class.
setText param Set the specified menu item text. The 'param' parameter contains two properties:
target: DOM object, the menu item to be setted.
text: string, the new text value.
setIcon param Set the specified menu item icon. The 'param' parameter contains two properties:
target: DOM object, the menu item.
iconCls: the new icon class.
findItem text Find the specified menu item, the return object is same as the getItem method.
appendItem param Append menu item, the 'param' parameter contains the following properties:
parent: DOM object that the new menu item will append to, if not setted, the new menu item will act as top menu item.
text: string, the menu item text.
href: string, the url location.
onclick: string or function, the script code or function to be executed when users click the menu item.
iconCls: string, the icon class.
removeItem itemEl Remove the specified menu item.
enableItem itemEl Enable the menu item.
disableItem itemEl Disable the menu item.