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 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
Javascript中this的用法详解
Sep 22 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
JS运算符优先级与表达式示例详解
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
PHP令牌 Token改进版
2008/07/18 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
在Python中定义和使用抽象类的方法
2016/06/30 Python
python变量不能以数字打头详解
2016/07/06 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
对Python _取log的几种方式小结
2019/07/25 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
学生会竞选演讲稿纪检部
2014/08/25 职场文书
钢琴师观后感
2015/06/12 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
MongoDB使用场景总结
2022/02/24 MongoDB
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis