EasyUI Munubutton 二级菜单

时间:13-05-08 栏目:EasyUI 作者:zongyan86 评论:1 点击: 5,806 次

效果图: a 代码如下: 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开发技术



声明: 本文由( zongyan86 )原创编译,转载请保留链接: EasyUI Munubutton 二级菜单

关注我们