首页 > 网页设计 > Js开发 > jQuery EasyUI API 中文文档 – 菜单(menu)
jQuery EasyUI API 中文文档 – 菜单(menu)
孤风一剑
9月 06, 2013
222

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