网页中右键功能的实现方法之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 Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
js中eval详解
Mar 30 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 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中的加密功能
2006/10/09 PHP
php 上传功能实例代码
2010/04/13 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
jquery键盘事件介绍
2011/01/31 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Python中的__slots__示例详解
2017/07/06 Python
Python制作动态字符图的实例
2019/01/27 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
班队活动设计方案
2014/01/30 职场文书
党校学习党性分析材料
2014/12/19 职场文书
初中作文评语
2014/12/25 职场文书
工作检讨书怎么写
2015/01/23 职场文书
经理岗位职责
2015/02/02 职场文书
六五普法学习心得体会
2016/01/21 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
JS实现数组去重的11种方法总结
2022/04/04 Javascript