jquery EasyUI中的MenuButton用法

2019独角兽企业重金招聘Python工程师标准>>>

在jquery EasyUI 的Demo 中 只有MenuButton 的显示DEMO，没有click 事件的相关操作，下面代码可以用js 动态的为menu item 绑定click 事件。

具体操作实现方法：

Html 代码：

<a id="helloEasyUI" 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 = $('#helloEasyUI').menubutton({ menu: '#cusmenu' });  
  
//menubutton 依赖于 menu、linkbutton 这两个插件，所以可以用如下代码实现：
$(ddlMenu.menubutton('options').menu).menu({ 
            onClick: function (item) { 
                //item 的相关属性参见API中的menu 
                alert(item.text); 
            } 
}) 

以上来源：http://www.kqiqi.com/knowledge/program/easyui-menubutton.html

我的补充：

如果：<a id="m_datasource" href="#" class="easyui-menubutton"
data-options="menu:'#mm_datasource',iconCls:'icon-edit'">数据源</a>

<div id="mm_datasource" style="width:100px;">
<div>Oracle数据源</div>
<div>SQLServer数据源</div>
<div>Mysql数据源</div>
<div class="menu-sep"></div>
<div>Excel文件</div>
<div>CSV文件</div>
<div>Txt文件</div>
<div class="menu-sep"></div>
<div>剪切板</div>


</div>

那么脚本就可以这么写： $("#mm_datasource").menu({ 
              onClick: function (item) { 
                  //item 的相关属性参见API中的menu 
                  console.log(item.text); 
              } 
  });

这是因为这个MM就是一个MENU

转载于:https://my.oschina.net/xiaohelong/blog/366808