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控件。

web开发技术