网页中右键功能的实现方法之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 相关文章推荐
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
js简易namespace管理器 实例代码
2013/06/21 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
JS常见算法详解
2017/02/28 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python实现五子棋小游戏
2020/03/25 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python列表与元组的异同详解
2019/07/02 Python
python自动识别文本编码格式代码
2019/12/26 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
医学生个人求职信范文
2014/02/07 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
学籍证明模板
2014/11/21 职场文书
销售经理岗位职责
2015/01/31 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
Python绘画好看的星空图
2022/03/17 Python
Python os和os.path模块详情
2022/04/02 Python
create-react-app开发常用配置教程
2022/06/25 Javascript