<html>
<head>
<script src="jquery-easyui/jquery.min.js"></script>
<script src="jquery-easyui/jquery.easyui.min.js"></script>
<script src="jquery-easyui/easyloader.js"></script>
<script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css" />
</head>
<body>
<!--当class等于"menu-sep"时是一条直线-->
<div id="mm" class="easyui-menu" style="width:120px;" data-options="left:100,top:100">
<div id="b">New</div>
<div id="c">
<span >Open</span>
<div style="width:150px;">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div iconCls="icon-save">Save</div>
<div class="menu-sep"></div>
<div id="a">Exit</div>
</div>
<a class="easyui-linkbutton" id="aa1" href="javascript:void(0)">显示</a>
<a class="easyui-linkbutton" id="aa2" href="javascript:void(0)">关闭</a>
<a class="easyui-linkbutton" id="aa3" href="javascript:void(0)">改变</a>
<a class="easyui-linkbutton" id="aa4" href="javascript:void(0)">图标</a>
<a class="easyui-linkbutton" id="aa5" href="javascript:void(0)">添加</a>
<a class="easyui-linkbutton" id="aa6" href="javascript:void(0)">移除</a>
<a class="easyui-linkbutton" id="aa7" href="javascript:void(0)">禁用</a>
<a class="easyui-linkbutton" id="aa8" href="javascript:void(0)">开启</a>
<script>
function aa(){
alert('123');
}
$(function (){
//点击显示，菜单显示
$("#aa1").click(function (){
$("#mm").menu('show',{
left:100,
top:100
})
})
//点击关闭，菜单关闭
$("#aa2").click(function (){
$("#mm").menu('hide')
})
//点击改变，修改特定的菜单文本
$("#aa3").click(function (){
$("#mm").menu('setText',{
target:$("#a"),
text:'嘻嘻哈哈'
})
})
//点击图标，修改特定的图标
$("#aa4").click(function (){
$("#mm").menu('setIcon',{
target:$("#a"),
iconCls:'icon-save'
})
})
//点击添加，添加菜单
$("#aa5").click(function (){
$("#mm").menu('appendItem',{
parent:$("#a"),
text:'呼呼啦啦',
iconCls:'icon-save'
})
})
//点击移除，移除菜单某一项
var itemEl = $('#b');
$("#aa6").click(function (){
$("#mm").menu('removeItem',itemEl)
})
//点击禁用，禁用菜单项
var itemEl1 = $('#c');
$("#aa7").click(function (){
$("#mm").menu('disableItem',itemEl1)
})
//点击开启，开启禁用菜单项
var itemEl1 = $('#c');
$("#aa8").click(function (){
$("#mm").menu('enableItem',itemEl1)
})
//把右键绑定当前的菜单
$(document).bind('contextmenu',function(e){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
return false;
});
})
</script>
<!--
menu的属性
left：菜单的左边距
<div id="mm" class="easyui-menu" style="width:120px;" data-options="left:100">
<div>New</div>
</div>
top:菜单的右边距
<div id="mm" class="easyui-menu" style="width:120px;" data-options="top:100">
<div>New</div>
</div>
menu的事件
onShow：当一个菜单被显示后触发。
<div id="mm" class="easyui-menu" style="width:120px;" data-options="left:100,top:100,onShow:aa">
<div>New</div>
</div>
onHide：在一个菜单被隐藏后触发。
<div id="mm" class="easyui-menu" style="width:120px;" data-options="left:100,top:100,onHide:aa">
<div>New</div>
</div>
onClick：当一个菜单被点击时触发。
<div id="mm" class="easyui-menu" style="width:120px;" data-options="left:100,onClick:aa">
<div>New</div>
</div>
menu的方法
show：在一个特定的位置显示菜单。
参数有2个属性：
left：新的左边距。
top：新的顶边距。
hide：隐藏一个菜单。
setText：设置特定的菜单文本，
参数包含2个属性：
target：DOM对象，将要被设置的菜单项。
text：字符串，新的文本值。
setIcon：设置特定的菜单项图标，
参数包含2个属性：
target：DOM对象，菜单项目。
iconCls: 新的图标css类。
removeItem：移除特定的菜单项。
enableItem：启用菜单项。
disableItem：禁用菜单项。
-->
</body>
</html>
