EasyUI menubutton|menu
EasyUI menubutton 继承 menu和linkbutton
Easyui menubutton构建方式一及绑定menuitem点击事件

html:
<a href="javascript:void(0)" id="menu_add" class="easyui-menubutton" menu="#mm1" iconCls="icon-add">新增</a>
<div id="mm1" style="width:150px;">
<div id="mm1t" iconCls="icon-menu-mm11">同级</div>
<div class="menu-sep"></div>
<div id="mm1x" iconCls="icon-menu-mm11">下级</div>
<div class="menu-sep"></div>
<div id="mm1d" iconCls="icon-menu-mm11">对象</div>
</div>
js:
$($('#menu_add').menubutton('options').menu).menu({onClick: function (item) {
//item 的相关属性参见API中的menu
alert(item.text);
}
});
//操作menuitem的disabledItem、removeItem方法
$($('#menu_add').menubutton('options').menu).menu('enableItem',$("#mm1x")[0]); //设定下级菜单不可用
$($('#menu_add').menubutton('options').menu).menu('setIcon',{target:$("#mm1x"),iconCls:'icon-menu-mm1'});//设定下级菜单的 iconCls
menubutton构建方式二及绑定menuitem点击事件
html:
<a id="a4" style="color:#0094ff" icon="icon-lightning">批量设置列宽</a> <div id="cusmenu" style="width:150px;"> <div id="80">宽度 80px</div> <div id="100">宽度 100px</div> <div id="120">宽度 120px</div> <div class="menu-sep"></div> <div iconCls="icon-set2">自定义列宽</div> </div>js:
//初始化 var ddlMenu = $('#a4').menubutton({ menu: '#cusmenu' }); //menubutton 依赖于 menu、linkbutton 这两个插件,所以我们可以这样搞定她 $(ddlMenu.menubutton('options').menu).menu({ onClick: function (item) { //item 的相关属性参见API中的menu alert(item.text); } })
menuitem的removeItem、disabledItem方法使用
html:
<div id="mm" class="easyui-menu" style="width:120px">
<div>New</div>
<div id="m-open">Open</div>
<div>Save</div>
</div>
js:
var itemEl = $('#m-open')[0]; // the menu item element
var item = $('#mm').menu('getItem', itemEl);//获取指定的id对应的item
var item = $('#mm').menu(’removeItem‘, itemEl);//移除指定的id对应的item
posted on 2013-06-15 00:29 aiyuaichou 阅读(979) 评论(0) 收藏 举报
浙公网安备 33010602011771号