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 幻灯片插件(带缩略图功能)
Jan 24 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
javascript实现滚轮轮播图片
Dec 13 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中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
php删除指定目录的方法
2015/04/03 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
php生成动态验证码gif图片
2015/10/19 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
解决python 输出是省略号的问题
2018/04/19 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
python如何查看网页代码
2020/06/07 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
车间班长岗位职责
2013/11/30 职场文书
员工薪酬福利制度
2014/01/17 职场文书
展会邀请函范文
2014/01/26 职场文书
绿色城市实施方案
2014/03/19 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS
python区块链持久化和命令行接口实现简版
2022/05/25 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js