网页中右键功能的实现方法之contextMenu的使用


Posted in Javascript onFebruary 20, 2017

本文介绍一种网页中实现右键功能的方案?contextMenu。

1.下载

下载地址

https://github.com/swisnl/jQuery-contextMenu

下载得到压缩文件jQuery-contextMenu-master.zip

解压后,使用dist目录下css、js。

2.使用方法

使用步骤:

(1) 引用css、js。

(2) html、js代码。

简单例子如下:

代码test.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="libs/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet"/>
<script src="libs/jQuery/jquery-1.8.3.min.js"></script>
<script src="libs/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
</head>
<body>
<span class="context-menu-one btn btn-neutral">right click me</span>
<script>
  $(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: function(){
          return 'context-menu-icon context-menu-icon-quit';
        }}
      }
    });
    $('.context-menu-one').on('click', function(e){
      console.log('clicked', this);
    })  
  });
</script>
</body>
</html>

效果图:

网页中右键功能的实现方法之contextMenu的使用

3.Demo and Document

https://swisnl.github.io/jQuery-contextMenu/demo.html
http://swisnl.github.io/jQuery-contextMenu/demo/on-dom-element.html

以上所述是小编给大家介绍的网页中右键功能的实现方法之contextMenu的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 #Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 #Javascript
Bootstrap table右键功能实现方法
Feb 20 #Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 #Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 #Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 #Javascript
原生js实现轮播图的示例代码
Feb 20 #Javascript
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
自己前几天写的无限分类类
2007/02/14 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python之super的使用小结
2018/08/13 Python
Python之循环结构
2019/01/15 Python
学年自我鉴定
2014/01/16 职场文书
烹饪自我鉴定
2014/03/01 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
2015毕业寄语大全
2015/02/26 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
返乡农民工证明
2015/06/24 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
mysql查找连续出现n次以上的数字
2022/05/11 MySQL