Jquery Easyui菜单组件Menu使用详解(15)

本文实例为大家分享了Jquery Easyui菜单组件的实现代码,供大家参考,具体内容如下

加载方式

菜单组件通常用于快捷菜单,在加载方式上,通过 class 或 JS 进行设置为菜单组件。然后,再通过 JS 事件部分再响应。

  
新建
打开
Word
Excel
PowerPoint
保存
退出

菜单项属性

Jquery Easyui菜单组件Menu使用详解(15)_第1张图片


保存

菜单属性

Jquery Easyui菜单组件Menu使用详解(15)_第2张图片

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

菜单事件

Jquery Easyui菜单组件Menu使用详解(15)_第3张图片

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

菜单方法

 Jquery Easyui菜单组件Menu使用详解(15)_第4张图片

//返回属性对象
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使用详解(15))