easyUI Menu

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