微信公众号：程序yuan
14.Menu菜单组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Menu.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<button id="btn1">右击显示菜单</button>
<br><br><br><br><br><br><br><br>
<button id="btn2">点击显示菜单</button>
<button id="btn3">点击关闭菜单</button>
<button id="btn4">点击销毁菜单</button>
<button id="btn5">获得DOM指定菜单项</button>
<button id="btn6">点击修改文本</button>
<br><br>
<button id="btn7">点击修改图标</button>
<button id="btn8">通过名称获得指定节点</button>
<button id="btn9">添加一个子项</button>
<button id="btn10">移除一个子项</button>
<button id="btn11">禁用一个菜单</button>
<button id="btn12">启用一个菜单</button>
<div id="box" class="easyui-menu" style="width:120px;">
<div id="new">新建</div>
<%--禁用菜单项--%>
<%--data-options="disabled:true,"--%>
<div >
<span>打开</span>
<div style="width: 150px;">
<div>Word</div>
<div>Excel</div>
<div>Powerpoint</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">保存</div>
<div class="menu-sep"></div><%--分割线--%>
<div>退出</div>
</div>
</body>
</html>
JS文件
$(function () {
//禁用系统自带的右击菜单
// e.preventDefault();
$("#box").menu({
left:100,
top:100,
minWidth:200,
//当鼠标离开菜单区域是隐藏，默认为true，
hideOnUnhover:true,
//---------- 事件列表 ---------------
onShow:function () {
// alert("显示时触发");
},
onHide:function () {
// alert("隐藏时触发");
},
onClick:function (item) {
// alert("点击时触发:"+item.text);
}
});
//返回属性对象
console.log($('#box').menu('options'));
//显示菜单
$("#btn1").on('contextmenu',function (e) {
//禁用系统自带的右击菜单
e.preventDefault();
$("#box").menu('show',{
// left:e.pageX,
// top:e.pageY,
});
});
$("#btn2").click(function () {
$('#box').menu('show',{
left:0,
top:0,
});
});
$("#btn3").click(function () {
$('#box').menu('hide');
});
$("#btn4").click(function () {
$('#box').menu('destroy');
});
$("#btn5").click(function () {
console.log($('#box').menu('getItem',$("#new")));
});
$("#btn6").click(function () {
$('#box').menu('setText',{
target: "#new",
text:"请新建哦",
});
});
$("#btn7").click(function () {
$('#box').menu('setIcon',{
target: "#new",
iconCls:"icon-add",
});
});
$("#btn8").click(function () {
console.log($('#box').menu('findItem','新建'));
});
$("#btn9").click(function () {
$('#box').menu('appendItem',{
id:'cut',
text:'剪切',
iconCls:'icon-cut',
onclick:function () {
alert("点击事件");
}
});
});
$("#btn10").click(function () {
$('#box').menu('removeItem','#cut');
});
$("#btn11").click(function () {
$('#box').menu('disableItem','#cut');
});
$("#btn12").click(function () {
$('#box').menu('enableItem','#cut');
});
});效果图
------------------------------------------------
