Jquery Easyui菜单组件Menu使用详解(15)


Posted in Javascript onDecember 18, 2016

本文实例为大家分享了Jquery Easyui菜单组件的实现代码,供大家参考,具体内容如下

加载方式

菜单组件通常用于快捷菜单,在加载方式上,通过 class 或 JS 进行设置为菜单组件。然后,再通过 JS 事件部分再响应。

<div id="box" class="easyui-menu">
    <div>新建</div>
    <div>
      <span>打开</span>
      <!--二次菜单-->
      <div style="width:150px;">
        <div>Word</div>
        <div>Excel</div>
        <div>PowerPoint</div>
      </div>
    </div>
    <div data-options="iconCls:'icon-save'">保存</div>
    <div class="menu-sep"></div>
    <div>退出</div>
  </div>

  <script>
    $(function () {
      //鼠标右击事件弹出菜单
      $(document).on('contextmenu',function(e){
        // 阻止系统默认弹出的菜单
        e.preventDefault();
        // 显示自定义的菜单
        $('#box').menu('show', {
          left : e.pageX,
          top : e.pageY
        });
      });
    });
  </script>

菜单项属性

Jquery Easyui菜单组件Menu使用详解(15)

<!--在 data-options 设置,只有两个有效,其他的参数会菜单方法中设置菜单项时有效-->
<div data-options="
  iconCls :'icon-save',
  disabled : true,">
  保存
</div>

菜单属性

Jquery Easyui菜单组件Menu使用详解(15)

//菜单属性,设置在 data-options 也同样有效
$('#box').menu({
   left : 100,
   top : 100,
   zIndex : 100,
   minwidth : 200,
   hideOnUnhover : true,
});

菜单事件

Jquery Easyui菜单组件Menu使用详解(15)

// 触发事件
$('#box').menu({
    onShow : function () {
    alert('显示时触发!');
    },
    onHide : function () {
    alert('隐藏时触发!');
    },
    onClick : function (item) {
    alert(item.text);
}
});

菜单方法

 Jquery Easyui菜单组件Menu使用详解(15)

//返回属性对象
console.log($('#box').menu('options'));

//显示菜单
$('#box').menu('show', {
   left : e.pageX,
   top : e.pageY,
});

//隐藏菜单
$('#box').menu('hide');

//销毁菜单
$('#box').menu('destroy');

//得到某个菜单项对象
console.log($('#box').menu('getItem', '#new'));

//设置某个菜单项文本
$('#box').menu('setText', {
   target : '#new',
   text : '修改',
});

//设置某个菜单项图标
$('#box').menu('setIcon', {
   target : '#new',
   iconCls : 'icon-add',
});

//通过文本获取指定的菜单项对象
console.log($('#box').menu('findItem','新建'));

//追加一个顶层菜单项
$('#box').menu('appendItem', {
    text : '新增',
    iconCls : 'icon-add',
    onclick : function () {
    alert('新增');
  },
});

//追加一个子菜单项
$('#box').menu('appendItem', {
   parent : $('#box').menu('findItem', '打开').target,
   text : '新增',
   iconCls : 'icon-add',
   onclick : function () {
   alert('新增');
  },
});

//移出指定菜单项
$('#box').menu('removeItem', '#new');

//禁用指定菜单项
$('#box').menu('disableItem', '#new');

//启用指定菜单项
$('#box').menu('enableItem', '#new');

//使用$.fn.menu.defaults 重写默认值对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 #Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 #Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 #Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 #Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 #Javascript
前端js弹出框组件使用方法
Aug 24 #Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 #Javascript
You might like
我的论坛源代码(十)
2006/10/09 PHP
同时提取多条新闻中的文本一例
2006/10/09 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php去除HTML标签实例
2013/11/06 PHP
PHP5.3新特性小结
2016/02/14 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
shiro授权的实现原理
2017/09/21 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
2014世界杯球队球队口号
2014/06/05 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL