jQuery EasyUI API 中文文档 - 菜单(menu)

发布时间:2016-12-9 13:56:10 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"jQuery EasyUI API 中文文档 - 菜单(menu)",主要涉及到jQuery EasyUI API 中文文档 - 菜单(menu)方面的内容,对于jQuery EasyUI API 中文文档 - 菜单(menu)感兴趣的同学可以参考一下。

<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>

上一篇:Android在listview添加checkbox实现单选多选操作问题
下一篇:WebRTC源码分析1视频显示

相关文章

相关评论