jQuery EasyUI Menu and Button Plugin - Menu

The defaults can be rewritten through $.fn.menu.defaults.

The Menu is typically used for context menus. It serves as the foundational component for creating other menu components such as menubuttons and splitbuttons. It can also be used for navigation and executing commands.

Usage

Creating a Menu

To create a menu via markup, add the 'easyui-menu' class to the <div> tag. Each menu item is created using a <div> tag. We can add the 'iconCls' attribute to a menu item to define an icon that appears to the left of the menu item. Adding the 'menu-sep' class to a menu item will produce a menu separator.

<div id="mm" class="easyui-menu" style="width:120px;">
    <div>New</div>
    <div>
        <span>Open</span>
        <div style="width:150px;">
            <div><b>Word</b></div>
            <div>Excel</div>
            <div>PowerPoint</div>
        </div>
    </div>
    <div data-options="iconCls:'icon-save'">Save</div>
    <div class="menu-sep"></div>
    <div>Exit</div>
</div>

Create a menu programmatically and listen for the 'onClick' event.

$('#mm').menu({
    onClick: function(item){
        //...
    }
});

Displaying the Menu

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

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

Menu Items

A menu item represents a single item displayed in the menu. It includes the following properties:

Menu Properties

Menu Events

<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

<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 | Sets the text for the specified menu item. The 'param' parameter contains two properties: target: the 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: the DOM object, the menu item. iconCls: the new icon's CSS class. Code example: $('#mm').menu('setIcon', { target: $('#m-open')[0], iconCls: 'icon-closed' }); | | findItem | text | Finds the specified menu item and returns an object similar to the getItem method. Code example: // find 'Open' item and disable it var item = $('#mm').menu('findItem', 'Open'); $('#mm').menu('disableItem', item.target); | | appendItem | options | Appends a new menu item. The 'param' parameter indicates the new item's 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 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 menu separator $('#mm').menu('appendItem', { separator: true }); // 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 | Removes the specified menu item. | | enableItem | itemEl | Enables the menu item. | | disableItem | itemEl | Disables the menu item. |