首页 > Web开发 > 详细

jquery EasyUI中的MenuButton用法

时间:2014-02-14 14:43:46      阅读:378      评论:0      收藏:0      [点我收藏+]

在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

jquery EasyUI中的MenuButton用法

原文:http://blog.csdn.net/xiaohelong2005/article/details/19162269

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!