第84款插件：jquery.contextmenu.js制作右键菜单插件

一、插件介绍

Jquery.contextmenu.js是一款轻量型、功能完善的插件、利用该插件可以在页面的任何位置，设置一个触发右键事件的元素。选中该元素并单击鼠标右键时，通过插件中的contextMenu方法弹出一个设计精美快捷菜单。该插件具有以下几个显著特点：
1、 可以在同一个页面 中设置多个不同样式的菜单。
2、 一个菜单可以绑定页面中多个元素。
3、 可随意设置菜单样式。
4、 轻松访问与绑定菜单中的各选项。

二、插件作者及下载

作者：Chris Domigan
贡献者：Dan G. Switzer, II
版本：Version: r2
开发日期：2007年7月16日
开发文档：http://www.trendskitchens.co.nz/jquery/contextmenu/
官方JS下载地址：http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js
本站JS下载地址：http://www.ijquery.cn/js/jquery.contextmenu.js

三、使用方法

$(element).contextMenu(Mid,[,option])

四、插件参数

其中，字符参数Mid表示与菜单绑定的元素的ID号。可选项对象Option可以设置元素与菜单绑定时的属性或者事件，其包含的属性和事件如下：
$(element).contextMenu(Mid,
	{
		Bindings{ //绑定菜单时，根据ID号获取或设置各选项属性和事件
			“选项ID号”,function(T){ //参数T为被绑定的元素
				… //获取或设置被选项的属性
			}
	},
menuStyle:{//菜单外框样式 
	…
}
itemStyle:{//菜单选项样式 
	…
}
itemHoverStyle:{//菜单选中样式 
	…
}
Shadow:true,//设置一个页面尔，默认为true,即显示背景阴影
eventPosY:XXX,//指定菜单弹出时，在页面中的Y值
eventPosX:XXX,//指定菜单弹出时，在页面中的x值
onContextMenu:function(e) {//菜单内容显示事件
	//其中通过回调函数中的参数e，可以获取被绑定菜单的元素，即e.target
	//如果该函数返回false,将不会弹出快捷菜单
}
onShowMenu:function(e,menu){ //菜单显示事件
	//其中通过回调函数的参数e，可以获取被绑定菜单的元素，即e.target
	//参数menu是显示菜单，通过该参数可以访问其中的某一个选项，如移除第1个选项，代码如下：
		$(‘第1个选项ID号’,menu).remove();
		return menu;
}
)

五、使用教程

1、HTML代码

注意填加两个ID，一个内容框ID为txtContent，一个菜单ID为sysMenu。

<textarea id="txtContent" style="width:500px;height:300px;margin-top:30px;"></textarea>
<div class="contextMenu" id="sysMenu">
	<ul>
		<li id="Li1"><img src="images/new.png" /> 新建</li>
		<li id="Li2"><img src="images/folder.png" /> 打开</li>
		<li id="Li3"><img src="images/disk.png" /> 保存</li>
		<hr />
		<li id="Li4"><img src="images/cross.png" /> 退出</li>
	</ul>
</div>

2、JS和CSS代码

<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.contextmenu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery.contextmenu.css" />
<style type="text/css">
	.contextMenu {display:none}
</style>
<script type="text/javascript">
	$(function() {
		$('#txtContent').contextMenu('sysMenu',
		{ bindings:
			{
				'Li1': function(Item) {
					alert("在ID号为：" + Item.id + "编辑框中，您点击了“新建”项");
				},
				'Li2': function(Item) {
					alert("在ID号为：" + Item.id + "编辑框中，您点击了“打开”项");
				}
				//设置其它选项事件
				//...
			}
		});
	})
</script>