文档章节

jquery EasyUI中的MenuButton用法

 大东家
发布于 2015/01/13 10:28
字数 293
阅读 28
收藏 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

本文转载自:http://blog.csdn.net/xiaohelong2005/article/details/19162269

粉丝 22
博文 255
码字总数 111936
作品 0
长沙
项目经理
私信 提问
EasyUI 1.5.x Of Insdep Theme 1.0.0 RC2 发布

JQuery EasyUI 1.5.x Of Insdep Theme 1.0.0 RC2 下方附部分美化截图 关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、plupl...

magicweng
2017/02/27
2.2K
5
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
jQuery EasyUI入门视频教程【20讲】

jQuery EasyUI入门视频教程【20讲】 jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。非职业讲师孙宇讲授,全...

Amamatthew
2014/09/28
1K
0
EasyUI 1.5.x Of Insdep Theme 1.0.0 RC1 美化主题大包已发布

关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、plupload等各类适应本主题的第三方插件美化补丁。并且各类常用Jquery插件正...

magicweng
2017/02/22
6.4K
24

没有更多内容

加载失败,请刷新页面

加载更多

华为手机翻译功能怎么使用?这三种方法请务必收藏

华为手机翻译功能怎么使用?在我们的生活中会经常遇到翻译问题,许多外语不好的朋友该怎么办呢?华为手机已经为我们解决了这个问题,今天小编就教大家学会使用华为手机中的三种翻译技巧,需要...

翻译小天才
26分钟前
4
0
企业服务软件开发中需要注意的三个问题

在开发企业服务软件时,我们需要分为:业务需求、用户需求、产品需求,三大需求层次,三个层次互相关联,企业服务软件开发首先要服务业务,需要满足业务的需求,再关注用户体验,也就是用户需...

积木创意科技
29分钟前
4
0
C++容器底层数据结构

内置数组: int arr[10][10];memset(arr,0,10*10*sizeof(int)); //初始化int tmp[10][10];memcpy(arr, tmp, 10 * 10 * sizeof(int));//拷贝 void *memcpy(void *destin, void *source,......

SibylY
29分钟前
3
0
Dubbo-自适应拓展机制

背景 在 Dubbo 中,很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等,这些都是Dubbo的基础组件。这些基础组件的拓展不是在系统框架启动阶段被加载,而是拓展方...

rock-man
57分钟前
7
0
Kali安装fcitx输入法(五笔)

安装fcitx > sudo apt-get install fcitx-rime fcitx-config-gtk3 重启 > sudo reboot fcitx配置 效果就是这样 配置输入法切换 系统设置...

yeahlife
59分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部