menu(菜单) · easyUI

hideOnUnhover ### Menu（菜单）使用$.fn.menu.defaults重写默认值对象。菜单组件通常用于快捷菜单。他是构建其他菜单组件的必备基础组件。比如：menubutton和splitbutton。它还可以用于导航和执行命令。 ![](https://box.kancloud.cn/2016-07-19_578d91351a07a.png) #### #### 使用案例 ##### 创建菜单通过标签创建菜单，给<div/>标签添加一个名为'easyui-menu'的类ID。每个菜单项都通过<div/>标签创建。我们可以添加'iconCls'属性来给菜单项定义一个图标显示到菜单项的左侧。添加'menu-sep'类ID菜单项将会生成一个菜单分割线。 1. **<div** id="mm" class="easyui-menu" style="width:120px;"**>** 1. **<div>**New**</div>** 1. **<div>** 1. **<span>**Open**</span>** 1. **<div** style="width:150px;"**>** 1. **<div><b>**Word**</b></div>** 1. **<div>**Excel**</div>** 1. **<div>**PowerPoint**</div>** 1. **</div>** 1. **</div>** 1. **<div** data-options="iconCls:'icon-save'"**>**Save**</div>** 1. **<div** class="menu-sep"**></div>** 1. **<div>**Exit**</div>** 1. **</div>** <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> 使用Javascript创建菜单项并监听'onClick'事件。 1. $('#mm').menu({ 1. onClick:function(item){ 1. //... 1. } 1. }); $('#mm').menu({ onClick:function(item){ //... } }); ##### 显示菜单在菜单被创建的时候它是隐藏和不可见的。调用'show'方法显示菜单。 1. $('#mm').menu('show', { 1. left: 200, 1. top: 100 1. }); $('#mm').menu('show', { left: 200, top: 100 }); #### 菜单项菜单项代表显示在菜单上的一个单独的项目。它包含以下属性： | **属性名** | **属性类型** | **描述** | **默认值** | |-----|-----|-----|-----| | id | string | 菜单项ID属性。 | | | text | string | 菜单项文本。 | | | iconCls | string | 显示在菜单项左侧的16x16像素图标的CSS类ID。 | | | href | string | 设置点击菜单项时候的页面位置。 | | | disabled | boolean | 定义是否显示菜单项。 | false | | onclick | function | 在点击菜单项的时候调用的函数。 | | #### #### 菜单属性 <table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>zIndex</td> <td>number</td> <td>菜单z-index样式，增加它的值。</td> <td>110000</td></tr><tr><td>left</td> <td>number</td> <td>菜单的左边距位置。</td> <td>0</td></tr><tr><td>top</td> <td>number</td> <td>菜单的上边距位置。</td> <td>0</td></tr><tr><td>minWidth</td> <td>number</td> <td>菜单的最小宽度。<strong><font color="#ff0000">（该属性自1.3.2版开始可用）</font></strong></td> <td>120</td></tr><tr><td>duration</td> <td>number</td> <td>该属性允许用户自定义隐藏菜单动画的持续时间，以毫秒为单位。<br/><strong><font color="#ff0000">（该属性自1.4版开始可用）</font></strong></td> <td>100</td></tr><tr><td>hideOnUnhover</td> <td>boolean</td> <td>当设置为true时，在鼠标离开菜单的时候将自动隐藏菜单。<br/><strong><font color="#ff0000">（该属性自1.3.5版开始可用）</font></strong></td> <td>true</td></tr></tbody></table> #### #### 菜单事件 | **事件名** | **事件参数** | **描述** | |-----|-----|-----| | 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> ~~~ | #### #### 菜单方法 <table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回属性对象。</td></tr><tr><td>show</td> <td>pos</td> <td>显示菜单到指定的位置。'pos'参数有2个属性：<br/>left：新的左边距位置。<br/>top：新的上边距位置。</td></tr><tr><td>hide</td> <td>none</td> <td>隐藏菜单。</td></tr><tr><td>destroy</td> <td>none</td> <td>销毁菜单。</td></tr><tr><td>getItem</td> <td>itemEl</td> <td>获取指定的菜单项。得到的是一个菜单项的DOM元素。下面的例子展示了如何根据ID获取指定的项： <pre><div id="mm" class="easyui-menu" style="width:120px"> <div>New</div> <div id="m-open">Open</div> <div>Save</div> </div> </pre><pre>var itemEl = $('#m-open')[0]; // 获取菜单项 var item = $('#mm').menu('getItem', itemEl); console.log(item); </pre></td></tr><tr><td>setText</td> <td>param</td> <td>设置指定菜单项的文本。'param'参数包含2个属性：<br/>target：DOM对象，要设置值的菜单项。<br/>text: 字符串，要设置的新文本值。 <p>代码示例：</p><pre>var item = $('#mm').menu('findItem', '保存'); $('#mm').menu('setText', { target: item.target, text: '修改' }); </pre></td></tr><tr><td>setIcon</td> <td>param</td> <td>设置指定菜单项图标。'param'参数包含2个属性：<br/>target：DOM对象，要设置的菜单项。<br/>iconCls：新的图标CSS类ID。 <p>代码示例：</p><pre>$('#mm').menu('setIcon', { target: $('#m-open')[0], iconCls: 'icon-closed' }); </pre></td></tr><tr><td>findItem</td> <td>text</td> <td>查找的指定菜单项，返回的对象和getItem方法是一样的。 <p>代码示例：</p><pre>// 查找“打开”项并禁用它 var item = $('#mm').menu('findItem', '打开'); $('#mm').menu('disableItem', item.target); </pre></td></tr><tr><td>appendItem</td> <td>options</td> <td>追加新的菜单项，'options'参数代表新菜单项属性。默认情况下添加的项在菜单项的顶部。追加一个子菜单项，'parent'属性应该设置指定的父项元素，并且该父项元素必须是已经定义在页面上的。 <p>代码示例：</p><pre>// 追加一个顶部菜单 $('#mm').menu('appendItem', { text: '新菜单项', iconCls: 'icon-ok', onclick: function(){alert('提示：新菜单项！')} }); </pre><pre>// 追加一个子菜单项 var item = $('#mm').menu('findItem', '打开'); // 查找“打开”项 $('#mm').menu('appendItem', { parent: item.target, // 设置父菜单元素 text: '打开Excel文档', iconCls: 'icon-excel', onclick: function(){alert('提示：打开Excel文档！')} }); </pre></td></tr><tr><td>removeItem</td> <td>itemEl</td> <td>移除指定的菜单项。</td></tr><tr><td>enableItem</td> <td>itemEl</td> <td>启用菜单项。</td></tr><tr><td>disableItem</td> <td>itemEl</td> <td>禁用菜单项。</td></tr><tr><td>showItem</td> <td>itemEl</td> <td>显示菜单项。<strong><font color="#ff0000">（该方法自1.4版开始可用）</font></strong></td></tr><tr><td>hideItem</td> <td>itemEl</td> <td>隐藏菜单项。<strong><font color="#ff0000">（该方法自1.4版开始可用）</font></strong></td></tr><tr><td>resize</td> <td>menuEl</td> <td>重置指定的菜单项。<strong><font color="#ff0000">（该方法自1.4版开始可用）</font></strong></td></tr></tbody></table>