EasyUI-Menu（菜单）

属性名

属性类型

描述

默认值

id

string

菜单项ID属性。

text

string

菜单项文本。

iconCls

string

显示在菜单项左侧的16×16像素图标的CSS类ID。

href

string

设置点击菜单项时候的页面位置。

disabled

boolean

定义是否显示菜单项。

false

onclick

function

在点击菜单项的时候调用的函数。

属性名

属性类型

描述

默认值

zIndex

number

菜单z-index样式，增加它的值。

110000

left

number

菜单的左边距位置。

0

top

number

菜单的上边距位置。

0

minWidth

number

菜单的最小宽度。（该属性自1.3.2版开始可用）

120

duration

number

该属性允许用户自定义隐藏菜单动画的持续时间，以毫秒为单位。
（该属性自1.4版开始可用）

100

hideOnUnhover

boolean

当设置为true时，在鼠标离开菜单的时候将自动隐藏菜单。
（该属性自1.3.5版开始可用）

true

事件名

事件参数

描述

onShow

none

在菜单显示之后触发。

onHide

none

在菜单隐藏之后触发。

onClick

item

在菜单项被点击的时候触发。下面的例子显示了如何处理所有菜单项的点击：

新建

保存

打印

退出

    function menuHandler(item){

        alert(item.name)

    }

方法名

方法参数

描述

options

none

返回属性对象。

show

pos

显示菜单到指定的位置。‘pos'参数有2个属性：
left：新的左边距位置。
top：新的上边距位置。

hide

none

隐藏菜单。

destroy

none

销毁菜单。

getItem

itemEl

获取指定的菜单项。得到的是一个菜单项的DOM元素。下面的例子展示了如何根据ID获取指定的项：

var itemEl = $(‘#m-open')[0]; // 获取菜单项

var item = $(‘#mm').menu(‘getItem', itemEl);

console.log(item); 

setText

param

设置指定菜单项的文本。‘param'参数包含2个属性：
target：DOM对象，要设置值的菜单项。
text: 字符串，要设置的新文本值。

代码示例：

var item = $(‘#mm').menu(‘findItem', ‘保存‘);

$(‘#mm').menu(‘setText', {

    target: item.target,

    text: ‘修改‘

}); 

setIcon

param

设置指定菜单项图标。‘param'参数包含2个属性：
target：DOM对象，要设置的菜单项。
iconCls：新的图标CSS类ID。

代码示例：

$(‘#mm').menu(‘setIcon', {

    target: $(‘#m-open')[0],

    iconCls: ‘icon-closed'

}); 

findItem

text

查找的指定菜单项，返回的对象和getItem方法是一样的。

代码示例：

// 查找“打开“项并禁用它

var item = $(‘#mm').menu(‘findItem', ‘打开‘);

$(‘#mm').menu(‘disableItem', item.target); 

appendItem

options

追加新的菜单项，‘options'参数代表新菜单项属性。默认情况下添加的项在菜单项的顶部。追加一个子菜单项，‘parent'属性应该设置指定的父项元素，并且该父项元素必须是已经定义在页面上的。

代码示例：

// 追加一个顶部菜单

$(‘#mm').menu(‘appendItem', {

    text: ‘新菜单项‘,

    iconCls: ‘icon-ok',

    onclick: function(){alert(‘提示：新菜单项！‘)}

});

// 追加一个子菜单项

var item = $(‘#mm').menu(‘findItem', ‘打开‘); // 查找“打开“项

$(‘#mm').menu(‘appendItem', {

    parent: item.target, // 设置父菜单元素

    text: ‘打开Excel文档‘,

    iconCls: ‘icon-excel',

    onclick: function(){alert(‘提示：打开Excel文档！‘)}

}); 

removeItem

itemEl

移除指定的菜单项。

enableItem

itemEl

启用菜单项。

disableItem

itemEl

禁用菜单项。

showItem

itemEl

显示菜单项。（该方法自1.4版开始可用）

hideItem

itemEl

隐藏菜单项。（该方法自1.4版开始可用）

resize

menuEl

重置指定的菜单项。（该方法自1.4版开始可用）