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

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

加载方式

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

rush:xhtml;">

Box" class="easyui-menu">

新建

打开

Word

Excel

PowerPoint

退出

菜单项属性

rush:xhtml;">

disabled : true,"> 保存

菜单属性

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

菜单事件

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

菜单方法

rush:js;"> //返回属性对象 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',iconCls : 'icon-add',});

//通过文本获取指定的菜单项对象
console.log($('#Box').menu('findItem','新建'));

//追加一个顶层菜单项
$('#Box').menu('appendItem',{
text : '新增',onclick : function () {
alert('新增');
},});

//追加一个子菜单项
$('#Box').menu('appendItem',{
parent : $('#Box').menu('findItem','打开').target,text : '新增',onclick : function () {
alert('新增');
},});

//移出指定菜单项
$('#Box').menu('removeItem','#new');

//禁用指定菜单项
$('#Box').menu('disableItem','#new');

//启用指定菜单项
$('#Box').menu('enableItem','#new');

//使用$.fn.menu.defaults 重写默认值对象。

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