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 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 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读取目录及子目录下所有文件名的方法
2014/10/20 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
php轻松实现文件上传功能
2016/03/03 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
Promise扫盲贴
2019/06/24 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python异常处理操作实例详解
2018/05/10 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python opencv读mp4视频的实例
2018/12/07 Python
python reverse反转部分数组的实例
2018/12/13 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
上课说话检讨书大全
2014/01/22 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
万能检讨书2000字
2014/10/17 职场文书
个人政治思想总结
2015/03/05 职场文书
聘任合同书
2015/09/21 职场文书
小数乘法教学反思
2016/02/22 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL