Jquery Easyui菜单组件Menu使用详解（15）

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

<!--在 data-options 设置，只有两个有效,其他的参数会菜单方法中设置菜单项时有效--><div data-options="  iconCls :'icon-save',  disabled : true,">  保存</div>

//菜单属性，设置在 data-options 也同样有效$('#box').menu({   left : 100,   top : 100,   zIndex : 100,   minwidth : 200,   hideOnUnhover : true,});

// 触发事件$('#box').menu({    onShow : function () {    alert('显示时触发！');    },    onHide : function () {    alert('隐藏时触发！');    },    onClick : function (item) {    alert(item.text);}});

//返回属性对象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 重写默认值对象。