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 相关文章推荐
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
web前端开发也需要日志
Dec 09 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
利用vue实现模态框组件
Dec 19 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
咖啡与水的关系
2021/03/03 冲泡冲煮
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
基于python二叉树的构造和打印例子
2019/08/09 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
UML设计模式笔试题
2014/06/07 面试题
工程造价专业大学生职业规划范文
2014/03/09 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
公司的力量观后感
2015/06/05 职场文书
区域销售大会开幕词
2016/03/04 职场文书