您的位置：首页 > Web前端 > JQuery

jquery.contextMenu 鼠标右键

2017-08-04 11:39 127 查看
本文介绍一种网页中实现右键功能的方案–contextMenu。

下载

下载地址

https://github.com/swisnl/jQuery-contextMenu

下载得到压缩文件jQuery-contextMenu-master.zip

解压后，使用dist目录下css、js。

使用方法

使用步骤：

(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="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:
4000
"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>


效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航