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

 

转载于:https://www.cnblogs.com/xzb-cnblogs/archive/2013/06/15/Easyui_menubutton.html