菜单menu

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" />
<script type="text/javascript">
$(function(){
$("#box").menu({
left : 0,
top : 100,
zIndex : 100,
minwidth : 200,
hideOnUnhover : true,//鼠标离开时是否自动隐藏
onShow : function(){
//alert("显示时触发");
},
onHide : function(){
//alert("隐藏时调用");
},
onClik : function(){
alert("当点击时调用");
}
});
$(document).on("contextmenu",function(e){
e.preventDefault();
//显示菜单
$("#box").menu("show",{
left : e.pageX,
top : e.pageY,
});
});
$("#box").menu("setText",{
target : "#save",
text :"新保存",
iconCls : 'icon-add',
});
//追加一个顶层菜单项
$("#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("新增");
}
});
//返回属性对象
console.log($("#box").menu('options'));
//隐藏菜单
$("#box").menu("hide");
//销毁对象
//$("#box").menu("destroy");
//得到某个菜单项对象
console.log($("#box").menu("getItem","#save"));
//设置某个菜单项可用
$("#box").menu("enableItem","#svae");
//设置某个菜单项不可用
$("#box").menu("disableItem","#svae");
});
</script>
</head>
<body>
<div id="box" class="easyui-menu" style="width:120px;">
<div>新建</div>
<div>
<span>打开</span>
<div style="width:150px;">
<div options="href:'https://123.sogou.com/'">Word</div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div id="save" data-options="iconCls:'icon-save'">保存</div>
<div class="menu-sep"></div>
<div>退出</div>
</div>
</body>
</html>

 posted on 2017-03-04 18:52  夏末秋萍  阅读(195)  评论(0)    收藏  举报