@author YHC

覆盖默认值$.fn.menu.defaults

这个menu通常用来做上下文菜单,这个是用来构建其他菜单组件的基本组件,例如menubutton 和splitbutton,也可以使用两个导航来执行命令.


使用示例

创建 Menu

通过标记创建menu,应该添加'easyui-menu' 样式给div标记,所有的菜单项都可以通过div标记创建,我们添加一个'iconCls'属性给菜单选项

定义一个icon他将显示在菜单项的左边,添加'menu-sep'样式给菜单项将创建一个菜单分隔符.


<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>

通过编程方式创建menu以及监听'onClick'事件:


$('#mm').menu({  
onClick:function(item){
}
});
显示 Menu

当menu已经创建,是隐藏的没有显示,调用'show'方法显示menu


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

Menu 选项

这个menu item 代表的是一个单独的选项它显示在menu(菜单的里面). 它包含一下属性:

Name

Type

Description

Default

id

string

menu选项的id属性.


text

string

选项文本.


iconCls

string

一个Css样式,显示一个16*16 icon 在选项的左边.


href

string

这是页面连接地址位置当点击菜单选项的时候.


disabled

boolean

定义menu选项是否禁用.

false

onclick

function

这个函数当点击菜单选项的时候执行.


Menu 属性


Name

Type

Description

Default

zIndex

number

菜单的z-index 样式,从这个值开始增加.

110000

left

number

菜单左边的位置.

0

top

number

菜单顶部的位置.

0

Menu 事件

Name

Parameters

Description

onShow

none

在菜单显示之后触发.

onHide

none

在菜单隐藏之后触发.

onClick

item

当菜单项被点击时触发. 下面的示例展示如何处理所有菜单项的点击事件:

<div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
<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 方法



Name

Parameter

Description

show

pos

显示一个菜单在一个特定的位置上.

pos参数有两个属性:

left: 新的左边的位置.

top:新的顶部的位置.

hide

none

隐藏一个菜单.

getItem

itemEl

得到菜单项属性,包含一个 'target'属性指定该项的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'参数包含两个属性:

target: DOM 对象, 被设置的菜单项的DOM元素.

text: 字符串, 新的text值.

代码示例:

var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
target: item.target,
text: 'Saving'
});


setIcon

param

设置特定的菜单项的icon.  'param' 包含两个属性:

target: DOM 对象,菜单项的DOM元素.

iconCls: 新的 icon 样式.

代码示例:

$('#mm').menu('setIcon', {
target: $('#m-open')[0],
iconCls: 'icon-closed'
});


findItem

text

查找特定的菜单项,返回的对象个getItem方法返回的一样.

代码示例:

// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);


appendItem

options

附加一个新的菜单项,  'options'参数指定一个新的菜单项的属性.默认添加的菜单项将成为顶级菜单项.添加子菜单项,一个paren属性应该设置一个特定的parent菜单项元素,该项应该是当前菜单已有的子项.

代码示例:

// 附加顶级菜单项
$('#mm').menu('appendItem', {
text: 'New Item',
iconCls: 'icon-ok',
onclick: function(){alert('New Item')}
});
// append a sub menu item
var item = $('#mm').menu('findItem', 'Open'); // 查找'Open' 菜单项
$('#mm').menu('appendItem', {
parent: item.target, // parent菜单项元素
text: 'Open Excel',
iconCls: 'icon-excel',
onclick: function(){alert('Open Excel')}
});


removeItem

itemEl

移除一个特定的菜单项.

enableItem

itemEl

启用一个菜单项.

disableItem

itemEl

禁用一个菜单项.



      以上如果有错误信息,请指出,thanks!