效果图:
代码如下:
html:
<a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-edit'"> Edit</a> <div id="mm" style=" 150px;"> <div id='mdm'>Oper <div class="easyui-menu" style=" 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控件。