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

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

<div class=”easyui-menu” data-options=”onClick:menuHandler” style=”width:120px;”>

    <div data-options=”name:’new'”>新建</div>

    <div data-options=”name:’save’,iconCls:’icon-save'”>保存</div>

    <div data-options=”name:’print’,iconCls:’icon-print'”>打印</div>

    <div class=”menu-sep”></div>

    <div data-options=”name:’exit'”>退出</div>

</div>

<script type=”text/javascript”>

    function menuHandler(item){

        alert(item.name)

    }

</script> 

方法名

方法参数

描述

options

none

返回属性对象。

show

pos

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

hide

none

隐藏菜单。

destroy

none

销毁菜单。

getItem

itemEl

获取指定的菜单项。得到的是一个菜单项的DOM元素。下面的例子展示了如何根据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]; // 获取菜单项

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版开始可用）