YouTip` tag. Each menu item is created via a `
` tag. You can add the 'iconCls' attribute to a menu item to define an icon displayed to the left of the menu item. Adding the 'menu-sep' class to a menu item will create a menu separator.
Programmatically create a menu and listen for the 'onClick' event.
$('#mm').menu({ onClick:function(item){//... }});
#### Showing a Menu
When a menu is created, it is hidden. Call the 'show' method to display the menu.
$('#mm').menu('show', { left: 200, top: 100});
#### Menu Item
A menu item represents a single item displayed in the menu. It contains the following properties:
| Name | Type | Description | Default Value |
| --- | --- | --- | --- |
| id | string | The id attribute of the menu item. | |
| text | string | The item text. | |
| iconCls | string | A CSS class to display a 16x16 icon to the left of the item. | |
| href | string | Sets the page location when the menu item is clicked. | |
| disabled | boolean | Defines whether the menu item is disabled. | false |
| onclick | function | The function to call when the menu item is clicked. | |
## Menu Properties
| Name | Type | Description | Default Value |
| --- | --- | --- | --- |
| zIndex | number | The z-index style of the menu, from which it starts to increase. | 110000 |
| left | number | The left position of the menu. | 0 |
| top | number | The top position of the menu. | 0 |
| minWidth | number | The minimum width of the menu. This property is available since version 1.3.2. | 120 |
| hideOnUnhover | boolean | If set to true, the menu will automatically hide when the mouse leaves it. This property is available since version 1.3.5. | true |
## Menu Events
| Name | Parameters | Description |
| --- | --- | --- |
| onShow | none | Fires after the menu is shown. |
| onHide | none | Fires after the menu is hidden. |
| onClick | item | Fires when a menu item is clicked. The following example demonstrates how to handle all menu item clicks: function menuHandler(item){alert(item.name)} |
## Menu Methods
| Name | Parameters | Description |
| --- | --- | --- |
| options | none | Returns the options object. |
| show | pos | Shows the menu at the specified position. The pos parameter has two properties: left: The new left position. top: The new top position. |
| hide | none | Hides the menu. |
| destroy | none | Destroys the menu. |
| getItem | itemEl | Gets the menu item properties that contain the 'target' property (indicating the item DOM element). The following example demonstrates how to get a specific item by id: var itemEl = $('#m-open'); // the menu item element var item = $('#mm').menu('getItem', itemEl); console.log(item); |
| setText | param | Sets the text for the specified menu item. The 'param' parameter contains two properties: target: DOM object, the menu item to be set. text: string, the new text value. Code example: var item = $('#mm').menu('findItem', 'Save'); $('#mm').menu('setText', {target: item.target,text: 'Saving'}); |
| setIcon | param | Sets the icon for the specified menu item. The 'param' parameter contains two properties: target: DOM object, the menu item. iconCls: The new icon's CSS class. Code example: $('#mm').menu('setIcon', {target: $('#m-open'),iconCls: 'icon-closed'}); |
| findItem | text | Finds the specified menu item, returns an object the same as the getItem method. Code example: // find 'Open' item and disable itvar item = $('#mm').menu('findItem', 'Open'); $('#mm').menu('disableItem', item.target); |
| appendItem | options | Appends a new menu item. The 'param' parameter indicates the new item properties. By default, the new item will be a top-level menu item. To append a sub-menu item, set the 'parent' property to indicate the parent item element that already has children. Code example: // append a top menu item $('#mm').menu('appendItem', {text: 'New Item',iconCls: 'icon-ok',onclick: function(){alert('New Item')}});// append a menu separator $('#mm').menu('appendItem', {separator: true});// append a sub menu itemvar item = $('#mm').menu('findItem', 'Open'); // find 'Open' item $('#mm').menu('appendItem', {parent: item.target, // the parent item elementtext: 'Open Excel',iconCls: 'icon-excel',onclick: function(){alert('Open Excel')}}); |
| removeItem | itemEl | Removes the specified menu item. |
| enableItem | itemEl | Enables the menu item. |
| disableItem | itemEl | Disables the menu item. |
* * jQuery EasyUI Plugin](#)