Section No. 206, JQuery easyui,menu (menu) component

JQuery easyui,menu (menu) component

Learning Essentials:

1. Loading mode

2. Menu item Properties

3. Menu Properties

4. Menu Events

5. Menu Methods

This lesson focuses on the use of the menu component in Easyui, which is not dependent on any other component.

A Load mode

Menu components are typically used for shortcut menus, which are set as menu components by class or JS, on load mode. Then, again through the JS event part again response.

Class loading mode,

<DivID= "box"class= "Easyui-menu"style= "width:120px;">    <Div>New</Div>    <Div>        <span>Open it</span>        <Divstyle= "width:150px;">            <Div>Word</Div>            <Div>Excel</Div>            <Div>Powerpoint</Div>        </Div>    </Div>    <Divdata-options= "Iconcls: ' Icon-save '">Save</Div>    <Divclass= "Menu-sep"></Div>    <Div>Exit</Div></Div>

Note must be used in conjunction with JS, because the default class loading mode, is hidden, and the default is the browser system menu

Js

$ (function  () {    $ (document). On (' ContextMenu ',function (e) {   //  Set the left mouse button method        e.preventdefault ();  // block default behavior and prevent browser system menu        from falling $ (' #box '). Menu (' show ', {   / / Execute custom left mouse button menu            left:e.pagex,  //  Menu location            top:e.pagey    // menu location         }     )});

The menu () method, which executes the element with the left mouse button in the custom menus method

JS Load Mode

$ (function  () {    $ (' #box '). Menu ({    });    $ (document). On (' ContextMenu ',function (e) {   // Set the left mouse button method        E.preventdefault ();  // block default behavior and prevent browser system menu        from falling $ (' #box '). Menu (' show ', {   / / Execute custom left mouse button menu            left:e.pagex,  //  Menu location            top:e.pagey    // menu location         }     )});

Two Menu item Properties

In Data-options settings, only two valid

<data-options= "iconcls: ' Icon-save ', Disabled:true,"> save </  div>

PS: Other parameters are valid when setting menu items in a menu method

Three Menu Properties

Menu properties, some settings are valid in Data-options

ZIndex number menu Z-index style, increase its value. The default value is 110000. set the hierarchical relationship of a menu

Left position of the number menu. The default value is 0.

The top position of the top number menu. The default value is 0.

MinWidth the minimum width of the number menu. The default value is 120.

Hideonunhover Boolean When set to True, the menu is automatically hidden when the mouse leaves the menu. The default value is true.

Four Menu Events

OnShow None fires after the menu is displayed.

Onhide None fires after the menu is hidden.

The OnClick item is triggered when the menu item is clicked.

Five Menu method

Options None returns a Property object.

Show POS Displays the menu to the specified location. The ' pos ' parameter has 2 properties:
Left: the new margin position.
Top: The new top margin position.

Hide None hides the menu.

Destroy none destroys the menu.

GetItem Itemel Gets the specified menu item. Gets the DOM element of a menu item.

SetText param sets the text for the specified menu item. The ' param ' parameter contains 2 properties:
The Target:dom object that is to set the value of the menu item.
Text: String, the new text value to set.

SetIcon param sets the specified menu item icon. The ' param ' parameter contains 2 properties:
The Target:dom object to set the menu item to.
ICONCLS: The new icon CSS class ID.

FindItem text finds the specified menu item, and the returned object is the same as the GetItem method.

Appenditem Options Appends a new menu item, the ' options ' parameter represents the new Item property. By default, items are added at the top of the menu item. Appends a submenu item, the ' parent ' property should set the specified parent element, and the parent element must be already defined on the page.

RemoveItem Itemel Removes the specified menu item.

Enableitem Itemel enable the menu item.

Disableitem Itemel disables the menu item.

Section No. 206, JQuery easyui,menu (menu) component