jQuery自定义鼠标右键菜单

一款jQuery的自定义鼠标右键菜单，在指定区域内单击鼠标右键，可以显示设定好的右键菜单，右键菜单可以设置相应的图标或者不设图标都可以，同样可以设置菜单的字体、颜色等样式和点击事件的响应，喜欢的童鞋请收下吧。

分类：导航菜单 > 图标导航难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，先引入一个CSS样式文件，再引入jQuery库和一个JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/jquery.contextMenu.css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.contextMenu.min.js"></script>

接着设置好页面元素的样式，代码如下：

<style type="text/css">
body {
	background: #000;
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}

.container {
	width: 1200px;
	height: 720px;
	position: absolute;
	left: 5%;
	margin: 10px 0 0 10px;
}

.container .box {
	width: 46%;
	height: 100%;
	background: #eee;
}

#box1 {
	float: left;
}

#box2 {
	float: right;
}

.title {
	height: 50px;
	line-height: 50px;
	font-size: 24px;
	text-align: center;
}

pre {
	font-size: 12px;
	font-family: "微软雅黑";
}
</style>

页面的body部分，将两种风格的右键菜单分别放入不同的div容器里即可，代码如下：

<div class="container">
	<div id="box1" class="box">
		<div class="title">右键点我！</div>
		<pre>
		$("#box1").contextMenu({
			menu: [{
					text: "新增",
					callback: function() {
						alert("新增");
					}
				},
				{
					text: "复制",
					callback: function() {
						alert("复制");
					}
				},
				{
					text: "粘贴",
					callback: function() {
						alert("粘贴");
					}
				},
				{
					text: "删除",
					callback: function() {
						alert("删除");
					}
				}
			]
		});	
		</pre>
	</div>
	<div id="box2" class="box">
		<div class="title">右键点我！</div>
		<pre>
	$("#box2").contextMenu({
		width: 110,// width
		itemHeight: 30,// 菜单项height
		bgColor: "#333",// 背景颜色
		color: "#fff",// 字体颜色
		fontSize: 12,// 字体大小
		hoverColor："#fff",// hover字体颜色
		hoverBgColor: "#99CC66",// hover背景颜色
		target: function(ele) {// 当前元素
			console.log(ele);
		},
		menu: [{// 菜单项
				text: "新增",
				icon: "img/1.png",
				callback: function() {
					alert("新增");
				}
			},
			{
				text: "复制",
				icon: "img/2.png",
				callback: function() {
					alert("复制");
				}
			},
			{
				text: "粘贴",
				icon: "img/3.png",
				callback: function() {
					alert("粘贴");
				}
			},
			{
				text: "删除",
				icon: "img/4.png",
				callback: function() {
					alert("删除");
				}
			}
		]
	
	});
			</pre>
	</div>
</div>

页面的底部，分别设置好两种风格的右键菜单的对应参数，代码如下：

<script type="text/javascript">
$("#box1").contextMenu({
	menu: [{
			text: "新增",
			callback: function() {
				alert("新增");
			}
		},
		{
			text: "复制",
			callback: function() {
				alert("复制");
			}
		},
		{
			text: "粘贴",
			callback: function() {
				alert("粘贴");
			}
		},
		{
			text: "删除",
			callback: function() {
				alert("删除");
			}
		}
	]
});

$("#box2").contextMenu({
	width: 110, // width
	itemHeight: 30, // 菜单项height
	bgColor: "#333", // 背景颜色
	color: "#fff", // 字体颜色
	fontSize: 12, // 字体大小
	hoverColor: "#fff", // hover字体颜色
	hoverBgColor: "#99CC66", // hover背景颜色
	target: function(ele) { // 当前元素--jq对象
		console.log(ele);
	},
	menu: [{ // 菜单项
			text: "新增",
			icon: "img/1.png",
			callback: function() {
				alert("新增");
			}
		},
		{
			text: "复制",
			icon: "img/2.png",
			callback: function() {
				alert("复制");
			}
		},
		{
			text: "粘贴",
			icon: "img/3.png",
			callback: function() {
				alert("粘贴");
			}
		},
		{
			text: "删除",
			icon: "img/4.png",
			callback: function() {
				alert("删除");
			}
		}
	]

});
</script>