EasyUI Munubutton 二级菜单
效果图:
代码如下:
html:
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
data-options="menu:'#mm',iconCls:'icon-edit'"> Edit</a>
<div id="mm" style="width: 150px;">
<div id='mdm'>Oper
<div class="easyui-menu" style="width: 120px;"></div>
<div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
</div>
</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div>Select All</div>
</div>
js:
//初始化
var ddlMenu = $('#mb').menubutton({ menu: '#mm' });
//menubutton 依赖于 menu、linkbutton 这两个插件,所以我们可以这样操作
$(ddlMenu.menubutton('options').menu).menu({
onClick: function (item) {
//item 的相关属性参见API中的menu
alert(item.text);
}
})
还是很简单的 ,用到menubutton控件和menu控件。
http://www.kuaipao8.com
浙公网安备 33010602011771号