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 相关文章推荐
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
微信小程序 开发之全局配置
May 05 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue element项目引入icon图标的方法
2018/06/06 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
jquery简易手风琴插件的封装
2020/10/13 jQuery
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
如何获取Python简单for循环索引
2019/11/21 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
自荐信的格式
2014/03/10 职场文书
升旗仪式主持词
2014/03/19 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
团员自我评价范文
2015/03/10 职场文书
2019各种承诺书范文
2019/06/24 职场文书