Menu

Override defaults with $.fn.menu.defaults.

The menu is usually used for context menus. It is the base component for building other menu component such as menubutton and splitbutton. It also can be used for both navigation and executing commands.

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 data-options="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. });

Menu Item

The menu item represents an individual item that is displayed within a menu. It contains the following properties:

Name Type Description Default
id string The id attribute of menu item.
text string The item text.
iconCls string A CSS class to display a 16x16 icon on item left.
href string Set page location while clicking the menu item.
disabled boolean Defines if to disable the menu item. false
onclick function The function to be called while clicking the menu item.

Menu 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
minWidth number The minimum width of menu. This property is available since version 1.3.2. 120

Menu 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. The example below shows how to process all menu item clicking:
<div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
	<div data-options="name:'new'">New</div>
	<div data-options="name:'save',iconCls:'icon-save'">Save</div>
	<div data-options="name:'print',iconCls:'icon-print'">Print</div>
	<div class="menu-sep"></div>
	<div data-options="name:'exit'">Exit</div>
</div>
<script type="text/javascript">
	function menuHandler(item){
		alert(item.name)
	}
</script>

Menu Methods

Name Parameter Description
options none Return the options object.
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.
destroy none Destroy a menu
getItem itemEl Get the menu item properties that include a 'target' property indicating the item DOM element. The example below shows how to get the specified item by id:
<div id="mm" class="easyui-menu" style="width:120px">
	<div>New</div>
	<div id="m-open">Open</div>
	<div>Save</div>
</div>
var itemEl = $('#m-open')[0];  // the menu item element
var item = $('#mm').menu('getItem', itemEl);
console.log(item);
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.

Code example:

var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
	target: item.target,
	text: 'Saving'
});
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.

Code example:

$('#mm').menu('setIcon', {
	target: $('#m-open')[0],
	iconCls: 'icon-closed'
});
findItem text Find the specified menu item, the return object is same as the getItem method.

Code example:

// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
appendItem options Append a new menu item, the 'options' parameter indicate the new item properties. By default the added item will become a top menu item. To append a sub menu item, a 'parent' property should be set to specify the parent item element that already has sub items.

Code example:

// append a top menu item
$('#mm').menu('appendItem', {
	text: 'New Item',
	iconCls: 'icon-ok',
	onclick: function(){alert('New Item')}
});
// append a sub menu item
var item = $('#mm').menu('findItem', 'Open');  // find 'Open' item
$('#mm').menu('appendItem', {
	parent: item.target,  // the parent item element
	text: 'Open Excel',
	iconCls: 'icon-excel',
	onclick: function(){alert('Open Excel')}
});
removeItem itemEl Remove the specified menu item.
enableItem itemEl Enable the menu item.
disableItem itemEl Disable the menu item.