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

网络编程 2024/11/13 佚名

3 2 1

本文实例为大家分享了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>

菜单项属性

<!--在 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 重写默认值对象。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Jquery,Easyui,菜单组件,Menu