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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
vue实现全选和反选功能
Aug 31 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
JS实现可视化音频效果的实例代码
Jan 16 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 新手入门教程
2009/08/03 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
教大家使用Python SqlAlchemy
2016/02/12 Python
全面理解Python中self的用法
2016/06/04 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Django框架视图函数设计示例
2019/07/29 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
模具专业推荐信
2013/10/30 职场文书
考核工作实施方案
2014/03/30 职场文书
难忘的一课教学反思
2014/04/30 职场文书
幼儿园个人总结
2015/02/28 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python