网页中右键功能的实现方法之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 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
JS实现网站吸顶条
Jan 08 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实现递归抓取网页类实例
2015/04/03 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
浅谈Python中的闭包
2015/07/08 Python
python tkinter界面居中显示的方法
2018/10/11 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python处理RSTP视频流过程解析
2020/01/11 Python
墨西哥购物网站:Elektra
2020/01/21 全球购物
物理专业本科生自荐信
2014/01/30 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
小学母亲节活动总结
2015/02/10 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js