16、Menu 菜单组件 · Jquery EasyUI 学习笔记

# 加载方式 > 菜单组件通常用于快捷菜单，在加载方式上，通过 class 或 JS 进行设置为菜单组件。然后，再通过 JS 事件部分再响应。 ``` <div id="box" class="easyui-menu"> <div>新建</div> <div> <span>打开</span>  <div style="width:150px;"> <div>Word</div> <div>Excel</div> <div>PowerPoint</div> </div> </div> <div data-options="iconCls:'icon-save'">保存</div> <div class="menu-sep"></div> <div>退出</div> </div> <script> $(function () { //鼠标右击事件弹出菜单 $(document).on('contextmenu',function(e){ // 阻止系统默认弹出的菜单 e.preventDefault(); // 显示自定义的菜单 $('#box').menu('show', { left : e.pageX, top : e.pageY }); }); }); </script> ``` # 菜单项属性 | 属性名 | 值 | 说明 | | --- | --- | | id | string | 菜单项 ID 属性。| | text | string | 菜单项文本。| | iconCls | string | 显示在菜单项左侧的16x16像素图标的CSS 类 ID。| | href | string | 设置点击菜单项时候的页面位置。| | disabled | boolean | 定义是否显示菜单项。默认值为 false。| | onclick | function | 在点击菜单项的时候调用的函数。| *** ```  <div data-options=" iconCls :'icon-save', disabled : true,"> 保存 </div> ``` # 菜单属性 | 属性名 | 值 | 说明 | | --- | --- | | zIndex | number | 菜单 z-index 样式，增加它的值。默认值110000。| | left | number | 菜单的左边距位置。默认值0。| | top | number | 菜单的上边距位置。默认值0。| | minWidth | number | 菜单的最小宽度。默认值120。| | hideOnUnhover | boolean | 当设置为 true 时，在鼠标离开菜单的时候将自动隐藏菜单。默认值 true。| *** ``` //菜单属性，设置在 data-options 也同样有效 $('#box').menu({ left : 100, top : 100, zIndex : 100, minwidth : 200, hideOnUnhover : true, }); ``` # 菜单事件 | 事件名 | 参数 | 说明 | | --- | --- | | onShow | none | 在菜单显示之后触发。| | onHide | none | 在菜单隐藏之后触发。| | onClick | item | 在菜单项被点击的时候触发。| *** ``` // 触发事件 $('#box').menu({ onShow : function () { alert('显示时触发！'); }, onHide : function () { alert('隐藏时触发！'); }, onClick : function (item) { alert(item.text); } }); ``` # 菜单方法 | 方法名 | 参数 | 说明 | | --- | --- | | options | none | 返回属性对象。| | show | pos | 显示菜单到指定的位置。'pos'参数有2个属性：left：新的左边距位置。top：新的上边距位置。| | hide | none | 隐藏菜单。| | destroy | none | 销毁菜单。| | getItem | itemEl | 获取指定的菜单项。得到的是一个菜单项的 DOM 元素。| | setText | param | 设置指定菜单项的文本。'param'参数包含2个属性：target：DOM 对象，要设置值的菜单项。text: 字符串，要设置的新文本值。| | setIcon | param | 设置指定菜单项图标。'param'参数包含2个属性：target：DOM 对象，要设置的菜单项。iconCls：新的图标 CSS 类 ID。| | findItem | text | 查找的指定菜单项，返回的对象和getItem 方法是一样的。| | appendItem | options | 追加新的菜单项，'options'参数代表新菜单项属性。默认情况下添加的项在菜单项的顶部。追加一个子菜单项，'parent'属性应该设置指定的父项元素，并且该父项元素必须是已经定义在页面上的。| | removeItem | itemEl | 移除指定的菜单项。| | enableItem | itemEl | 启用菜单项。| | disableItem | itemEl | 禁用菜单项。| *** ``` //返回属性对象 console.log($('#box').menu('options')); //显示菜单 $('#box').menu('show', { left : e.pageX, top : e.pageY, }); //隐藏菜单 $('#box').menu('hide'); //销毁菜单 $('#box').menu('destroy'); //得到某个菜单项对象 console.log($('#box').menu('getItem', '#new')); //设置某个菜单项文本 $('#box').menu('setText', { target : '#new', text : '修改', }); //设置某个菜单项图标 $('#box').menu('setIcon', { target : '#new', iconCls : 'icon-add', }); //通过文本获取指定的菜单项对象 console.log($('#box').menu('findItem','新建')); //追加一个顶层菜单项 $('#box').menu('appendItem', { text : '新增', iconCls : 'icon-add', onclick : function () { alert('新增'); }, }); //追加一个子菜单项 $('#box').menu('appendItem', { parent : $('#box').menu('findItem', '打开').target, text : '新增', iconCls : 'icon-add', onclick : function () { alert('新增'); }, }); //移出指定菜单项 $('#box').menu('removeItem', '#new'); //禁用指定菜单项 $('#box').menu('disableItem', '#new'); //启用指定菜单项 $('#box').menu('enableItem', '#new'); //使用$.fn.menu.defaults 重写默认值对象。 ```