jQuery EasyUI API 中文文档 - 菜单（menu）
来源：互联网 发布：slack linux 编辑：程序博客网 时间：2024/06/05 02:37
<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>
