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

2019-11-19 17:30:03

字体：大中小

来源：转载

供稿：网友

本文介绍一种网页中实现右键功能的方案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效果图