JavaScript

超轻量级php框架startmvc

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

更新时间:2020-04-24 12:35:01 作者:startmvc
本文介绍一种网页中实现右键功能的方案–contextMenu。1.下载下载地址https://github.com/swisnl/jQu

本文介绍一种网页中实现右键功能的方案–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的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

contextmenu的使用 网页右键功能