效果预览
动态修改选项
如果需要动态修改禁用属性,或者修改选项，只需重新调用mouseMenu方法，设置disabled属性即可
皮肤
设置skin属性，支持black、
blue、
green
、
orange四种，默认为black
如果需要设置其他颜色，只需要增加如下css样式：
$("#menu1").mouseMenu({
skin: 'mySkin',
options:[]
});
.contextmenu-default.mySkin>li:hover>a{
background: #009688;
color: white;
}
.contextmenu-default.mySkin>li:hover>a.disabled{
background: #119688;
color: lightgray;
}
调用
<div id="menu4">
原始样式
</div>
$("#menu4").mouseMenu({
//皮肤
skin:'green',
//字体大小
size:'sm',
//下拉选项
options:[
{
title:'刷新',
//子菜单会自动禁用
disabled: true,
//图标
icon:'<i class="fa fa-refresh"></i>',
//点击回调
click:function(e){},
//二级菜单
child:[
{
title:'刷新当前',
icon:'<i class="fa fa-android"></i>'},
{
title:'刷新全部',
icon:'<i class="fa fa-apple"></i>'
},
]
},{
title:'锁定',icon:'<i class="fa fa-lock"></i>'
},{
title:'关闭',
icon:'<i class="fa fa-close"></i>',
child:[
{
title:'关闭当前',
icon:'<i class="fa fa-camera"></i>'
},
{
title:'关闭其它',
icon:'<i class="fa fa-calendar"></i>'
},
{
title:'全部关闭',
disabled: true,
icon:'<i class="fa fa-database"></i>'
}
],
},{
title:'新窗口打开',
icon:'<i class="fa fa-plus"></i>'
},
],
afterInit: function (ul) {
setTimeout(function(){
ul.css({'top':100,'left':710}).show();
},1000);
},
//菜单被手动显示后调用
onHandMenu: function(ul,e){
alert('手动点击显示菜单');
}
});