网页中右键功能的实现方法之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实现的所谓的滑动门
May 23 Javascript
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
jQuery选择器全集详解
Nov 24 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
js中less常用的方法小结
Aug 09 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
puppeteer库入门初探
Jan 09 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
深入php self与$this的详解
2013/06/08 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
wxPython学习之主框架实例
2014/09/28 Python
Python中的高级数据结构详解
2015/03/27 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python科学计算之narray对象用法
2019/11/25 Python
Python排序函数的使用方法详解
2020/12/11 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
十八届三中全会感言
2014/03/10 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
Python if else条件语句形式详解
2022/03/24 Python