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 阅读(951) 评论(0) 编辑 收藏 举报