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

 

posted on 2013-06-15 00:29  aiyuaichou  阅读(951)  评论(0编辑  收藏  举报

导航