EasyUi之menu组件

1、基本创建

<div id="mm" class="easyui-menu" style="width:120px;">  

   <div>新建</div>

   <div>打开</div>

   <div>保存</div>

   <div>退出</div>

   </div>

2、阻止默认菜单

$(function(){

$(document).on('contextmenu',function(e){

//阻止默认的菜单

e.preventDefault();

});

});

3、鼠标处显示

$(function(){

$(document).on('contextmenu',function(e){

e.preventDefault();

$('#box').menu('show',{

left:e.pageX,

top:e.pageY,

});

});

});

鼠标处显示

4、增加子菜单

<div>

   打开

<div style="width:150px;">  

            <div><b>Word</b></div>  

            <div>Excel</div>  

            <div>PowerPoint</div>  

        </div> 

若想显示出子菜单。需要加style="width:150px;"属性

效果如下

5、获得对象

1、console.log($('#box').menu('getItem','#new'));

console.log($('#box').menu('getItem','#new').text);

2、 console.log($( '#box' ).menu( 'findItem' , '退出' ));

7、更换属性

console.log($('#box').menu('setText',{

target:'#new',

text:'增加',

}));

8、改图标

console.log($('#box').menu('setIcon',{

target:'#new',

iconCls:'icon-add',

}));

9、跳转页面

$('#box').menu('appendItem',{

text:'新增',

iconCls:'icon-add',

href:'add.html',

})

10、显灰，即 disableItem

$('#box').menu('appendItem',{

id:'add',

text:'新增',

iconCls:'icon-add',

href:'add.html',

});

$('#box').menu('disableItem','#add');

效果如下;

11、事件，触发

$('#box').menu({

onShow:function(){

alert('显示触发');

},

onHide:function(){

alert('隐藏触发');

},

onClick:function(item){

alert(item.text);

}

});

效果之一;