jquery插件ContextMenu设置右键菜单


Posted in Javascript onMarch 13, 2017

Struts项目中右键菜单一般很少用到,但是一旦客户有要求,很多人就懵圈了,比如我。这个时候,当然要表现镇定,一面拍着胸口对客户承诺说绝对可以实现,一面赶紧打开百度神器,搜搜看是否有前人已经写好的插件。

于是便找到了jQuery的ContextMenu插件。上官网看看Demo,真不错,正是我要的效果。源码下下来,却没有说明文档告诉我们该如何组装,可能写这插件的牛人们觉得步骤太简单,写出来都觉得丢人。可苦了我们这等愚昧之徒,研究半天,总算从一堆代码中取其精华弃其糟粕,形成最简练的代码,以供初学者们参考。

官网下载地址:http://plugins.jquery.com/contextMenu/

我这边下的是1.6.6版本。源码目录结构如下:

jquery插件ContextMenu设置右键菜单

里边有个demo.html文件,这个就是我们要研究的对象。打开这个文件,可以试试效果,感觉不错吧。

jquery插件ContextMenu设置右键菜单

但是用记事本或者其他编辑器查看源代码,你会觉得头晕。一堆的js文件和css文件,恐怖不是每个都是必须的,这就要我们自己调试了,插件作者是不会告诉我们的。

jquery插件ContextMenu设置右键菜单

OK,由于时间关系,我已经帮大家删掉多余的代码,精简后的代码如下:

<html>
<head>
  <title>jQuery contextMenu Plugin Demo</title>

  <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
  <script src="src/jquery.contextMenu.js" type="text/javascript"></script>
  <link href="src/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="context-menu-one">
  <strong>right click me</strong>
</div>

<script type="text/javascript" class="showcase">
$(function(){
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m); 
    },
    items: {
      "edit": {name: "Edit", icon: "edit"},
      "cut": {name: "Cut", icon: "cut"},
      "copy": {name: "Copy", icon: "copy"},
      "paste": {name: "Paste", icon: "paste"},
      "delete": {name: "Delete", icon: "delete"},
      "sep1": "---------",
      "quit": {name: "Quit", icon: "quit"}
    }
  });

  $('.context-menu-one').on('click', function(e){
    console.log('clicked', this);
  })
});
</script>

</body>
</html>

运行效果:

jquery插件ContextMenu设置右键菜单

根据这段精简后的代码,我们就可以知道使用这个插件了。

第一步:把核心文件jquery-1.8.2.min.js、jquery.contextMenu.js、jquery.contextMenu.css拷贝至我们的项目中。

第二步:编写生成菜单以及相应菜单动作的javascript脚本。

$(function(){
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m); 
    },
    items: {
      "edit": {name: "Edit", icon: "edit"},
      "cut": {name: "Cut", icon: "cut"},
      "copy": {name: "Copy", icon: "copy"},
      "paste": {name: "Paste", icon: "paste"},
      "delete": {name: "Delete", icon: "delete"},
      "sep1": "---------",
      "quit": {name: "Quit", icon: "quit"}
    }
  });

  $('.context-menu-one').on('click', function(e){
    console.log('clicked', this);
  })
});

第三步:在合适的位置设置右键菜单。

<div class="context-menu-one">
  <strong>right click me</strong>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
Javascript模块化编程详解
Dec 01 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 #Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 #Javascript
jQuery+CSS3实现点赞功能
Mar 13 #Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 #Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 #Javascript
常用的几个JQuery代码片段
Mar 13 #Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 #Javascript
You might like
PHP自定义大小验证码的方法详解
2013/06/07 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python内置函数dir详解
2015/04/14 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
护理学毕业生自荐信
2013/10/02 职场文书
英文求职信结束语大全
2013/10/26 职场文书
安全大检查反思材料
2014/01/31 职场文书
财政专业求职信范文
2014/02/19 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
教师节标语大全
2014/10/07 职场文书
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers