easyUI Menu
2012-07-31 17:11 java线程例子 阅读(270) 评论(0) 编辑 收藏 举报@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 | 禁用一个菜单项. |