jQuery鼠标右键点击菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标右键点击菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>jQuery鼠标右键点击菜单代码</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.5897" name=GENERATOR>
<LINK href="css/page_style.css" type=text/css rel=stylesheet>
<SCRIPT src="js/jquery-1.1.3.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/jquery.contextmenu.r2.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
$(document).ready(function() {
  $('span.demo1').contextMenu('myMenu1', {
	bindings: {
	  'open': function(t) {
		alert('Trigger was '+t.id+'\nAction was Open');
	  },
	  'email': function(t) {
		alert('Trigger was '+t.id+'\nAction was Email');
	  },
	  'save': function(t) {
		alert('Trigger was '+t.id+'\nAction was Save');
	  },
	  'delete': function(t) {
		alert('Trigger was '+t.id+'\nAction was Delete')
	  }
	}
  });
  $('#demo2').contextMenu('myMenu2', {
	menuStyle: {
	  border: '2px solid #000'
	},
	itemStyle : {
	  fontFamily: 'verdana',
	  backgroundColor: '#666',
	  color: 'white',
	  border: 'none',
	  padding: '1px'
	},
	itemHoverStyle: {
	  color: '#fff',
	  backgroundColor: '#0f0',
	  border: 'none'
	}
  });
  $('table tr').contextMenu('myMenu3', {
	onContextMenu: function(e) {
	  if ($(e.target).attr('id') == 'dontShow'){
		return false;
	  }else{
		return true;
	  }
	},
	onShowMenu: function(e, menu) {
	  if ($(e.target).attr('id') == 'showOne') {
		$('#item_2, #item_3', menu).remove();
	  }
	  return menu;
	}
  });
  
  
});
</SCRIPT>
</HEAD>
<BODY>


<H1>右键菜单插件(ContextMenu plugin)</H1>
<P><B>右键菜单(ContextMenu)</B>是一个轻量级的jquery插件，使用它你可以选择性的用自定义的右键菜单替换浏览器的右键菜单。</P>
<DIV class=contextMenu id=myMenu1>
	<UL>
		<LI id=open><IMG src="images/folder.png"> Open </LI>
	  <LI id=email><IMG src="images/email.png"> Email </LI>
	  <LI id=save><IMG src="images/disk.png"> Save </LI>
	  <LI id=delete><IMG src="images/cross.png"> Delete</LI>
	</UL>
</DIV>
<DIV class=contextMenu id=myMenu2>
  <UL>
	<LI id=item_1>Item 1 </LI>
	<LI id=item_2>Item 2 </LI>
	<LI id=item_3>Item 3 </LI>
	<LI id=item_4>Item 4 </LI>
	<LI id=item_5>Item 5 </LI>
	<LI id=item_6>Item 6 </LI>
	<LI id=item_7>Item 7 </LI>
	<LI id=item_8>Item 8 </LI>
  </UL>
</DIV>
<DIV class=contextMenu id=myMenu3>
  <UL>
	<LI id=item_1>Item 1 </LI>
	<LI id=item_2>Item 2 </LI>
	<LI id=item_3>Item 3 </LI>
  </UL>
</DIV>
<SPAN class=demo1 id=quickDemo style="BORDER-RIGHT: #888 1px solid; BORDER-TOP: #888 1px solid; FLOAT: right; BORDER-LEFT: #888 1px solid; BORDER-BOTTOM: #888 1px solid">
	<B>DEMO</B> 右键点击我!! 
</SPAN>
<H2>特性</H2>
	<UL>
	  <LI>一个页面可以使用多个菜单</LI>
	  <LI>菜单可以绑定到多种页面元素</LI>
	  <LI>自定义样式 </LI>
	  <LI>指定菜单回调函数</LI>
	</UL>
	<H2>当前版本</H2>
	<TABLE>
	  <TBODY>
		  <TR>
			<TH>版本号</TH>
			<TD>r2</TD></TR>
		  <TR>
			<TH>发布日期</TH>
			<TD>2007-7-16</TD>
		  </TR>
		  <TR>
			<TH>作者</TH>
			<TD>Chris Domigan <I>(cdomigan@gmail.com)</I></TD></TR>
		  <TR>
			<TH>贡献者</TH>
			<TD>Dan G. Switzer, II</TD></TR>
		  <TR>
			<TH>类库需求</TH>
			<TD>jQuery V1.1或更高</TD></TR>
		  <TR>
			<TH>支持浏览器</TH>
			<TD>Firefox 1.5+<BR>Internet Explorer 6.0+ </TD>
		  </TR>
	  </TBODY>
	</TABLE>
	<H2>更新日志</H2>
	<UL>
	  <LI><B>版本2</B> - 2007-7-16 
	  <UL>
		<LI>可以正确使用默认参数
		<LI>增加 <B>shadow</B>, <B>eventPosX</B>, <B>eventPosY</B>,<B>onContextMenu</B> 和 <B>onShowMenu</B> 选项 
		<LI>大部分修改由Dan G. Switzer, II完成</LI>
	  </UL>
	  <LI><B>版本1</B> - 2007-3-9 
	  <UL>
		<LI>首次发布</LI>
	  </UL>
	  </LI>
	</UL>
	<H2>使用方法</H2>
	  <P>$(<I>elements</I>).contextMenu(String <B>menu_id</B> [, Object <B>settings</B>]); </P>
	  <P>在HTML标签中定义菜单结构.对于每个菜单，在使用样式"contextMenu"的div标签中放置一些无序列表和你要调用的ID(参见例子).
		 div标签可以放置在任意位置，它会被插件隐藏起来.<BR>
		 你可以在页面上定义任意多的菜单. 每个&lt;li&gt;标签会作为一个菜单选项. 
		 为每个&lt;li&gt;标签分配一个唯一id，这样就可以为其绑定操作. <BR>
		 <B>注意:菜单(ContextMenu)目前不支持嵌套菜单. 这个特性也许在以后的版本出现.</B> 
	  </P>
	<H2>参数</H2>
	<H3>菜单ID</H3>
	<P>菜单id是在菜单中定义的.可以将菜单绑定到一个或多个元素上. <br>
		 例：<CODE>$("table td").contextMenu("myMenu")</CODE> 会将菜单绑定到id为"myMenu"的表格单元格中<BR>
		 <font style="COLOR: red">注意: 版本1中，id前需要加上一个"#"</font> </P>
	<H3>设置</H3>
	<P>菜单插件(ContextMenu)接收一个额外的参数对象来设置菜单项的样式和绑定鼠标事件. 菜单插件(ContextMenu)支持一下参数设置: 
	<DL>
	  <DT>bindings 
	  <DD>包含id的对象:函数组. 当关联的菜单项被点击时调用所提供的函数.触发当前菜单的元素作为第一个参数传递给函数.<br>
	  <font style="COLOR: red">注意: 版本1中，id前需要加上一个"#"</font>
	  <DT>menuStyle 
	  <DD>包含样式名的对象:装饰包含菜单的容器的名值对.
	  <DT>itemStyle 
	  <DD>包含样式名的对象:装饰&lt;li&gt;标签的名值对. 
	  <DT>itemHoverStyle 
	  <DD>包含样式名的对象:装饰鼠标浮动到&lt;li&gt;上的效果. 
	  <DT>shadow 
	  <DD>布尔型:是否显示菜单下拉阴影. <br>
		<font style="COLOR: green">默认为<B>true</B></font> 
	  <DT>eventPosX 
	  <DD>定义当鼠标点击时菜单的x轴位置.有时候(特别是在使用IE6时)设置为"clientX". <BR>
		<font style="COLOR: green">默认为<b>'pageX'</b></font> 
	
	  <DT>eventPosY 
	  <DD>定义当鼠标点击时菜单的y轴位置.有时候(特别是在使用IE6时)设置为"clientY". <BR>
		<font style="COLOR: green">默认为<b>'pageY'</b></font>		
	  <DT>onContextMenu(<B>event</B>) 
	  <DD>菜单显示前调用的自定义事件函数.如果函数返回false，菜单将不显示.该事件可实现在大块元素
		(或整个页面)上绑定菜单，然后判断是否在右击时显示菜单 		 
	  <DT>onShowMenu(<B>event</B>, <B>menu</B>) 
	  <DD>菜单显示前调用的自定义事件函数.该事件传递一个参数在菜单显示前操作输出.在显示菜单前，
		  你可以通过该事件来显示、隐藏或其他你想要的任何操作. 该函数返回值必须是menu. 
	  </DD>
	</DL>
	<H3>更改默认参数</H3>
	<P>除了通过参数对象来设置菜单样式外,你还可以通过调用<B>$.contextMenu.defaults(settings)</B>
		 来扩展默认参数.除<B>bindings</B>外每个设置都会用作默认参数.<BR>
		例: 
		<pre>
$.contextMenu.defaults({
menuStyle : {
  border : "2px solid green"
},
shadow: false,
onContextMenu: function(e) {
  alert('Did someone asked for a context menu?!');
}		
});
	  </pre>

  <H2>例子</H2>
  <H3>例1 - 简单应用</H3>
  <P>
	<SPAN class=demo1 id=demo1_yellow><B>RIGHT CLICK FOR DEMO</B></SPAN> 
	<SPAN class=demo1 id=demo1_green style="BACKGROUND-COLOR: lightgreen">
		<B>THIS WORKS TOO</B>
	</SPAN> 
  </P>
  <H4>Html</H4>
<PRE>
&lt;div class="contextMenu" id="myMenu1"&gt;
  &lt;ul&gt;
	&lt;li id="open"&gt;&lt;img src="folder.png" /&gt; Open&lt;/li&gt;
	&lt;li id="email"&gt;&lt;img src="email.png" /&gt; Email&lt;/li&gt;
	&lt;li id="save"&gt;&lt;img src="disk.png" /&gt; Save&lt;/li&gt;
	&lt;li id="close"&gt;&lt;img src="cross.png" /&gt; Close&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</PRE>
<H4>Javascript</H4><PRE>
$('span.demo1').contextMenu('myMenu1', {
  bindings: {
	'open': function(t) {
	  alert('Trigger was '+t.id+'\nAction was Open');
	},
	'email': function(t) {
	  alert('Trigger was '+t.id+'\nAction was Email');
	},
	'save': function(t) {
	  alert('Trigger was '+t.id+'\nAction was Save');
	},
	'delete': function(t) {
	  alert('Trigger was '+t.id+'\nAction was Delete');
	}
  }
});</PRE>
<P>上述代码将菜单"myMenu1"绑定到样式为"demo1"的所有span元素上</P>
<H3>例2 - 基本样式 </H3>
<P id=demo2 style="BACKGROUND-COLOR: lightpink">Right clicking anywhere in this 
paragraph will trigger the context menu. </P>
<H3>Html</H3><PRE>
&lt;div class="contextMenu" id="myMenu2"&gt;
&lt;ul&gt;
  &lt;li id="item_1"&gt;Item 1&lt;/li&gt;
  &lt;li id="item_2"&gt;Item 2&lt;/li&gt;
  &lt;li id="item_3"&gt;Item 3&lt;/li&gt;
  &lt;li id="item_4"&gt;Item 4&lt;/li&gt;
  &lt;!-- etc... --&gt;
&lt;/ul&gt;
&lt;/div&gt;</PRE>
<H3>Javascript</H3><PRE>
$('#demo2').contextMenu('myMenu2', {
  menuStyle: {
	border: '2px solid #000'
  },
  itemStyle: {
	fontFamily : 'verdana',
	backgroundColor : '#666',
	color: 'white',
	border: 'none',
	padding: '1px'
  },
  itemHoverStyle: {
	color: '#fff',
	backgroundColor: '#0f0',
	border: 'none'
  }
});
</PRE>
<P>上述代码将菜单"myMenu2"绑定到id为"demo2"的元素上. </P>
<H3>例3 - 带有回调函数的高级应用</H3>
<P style="FONT-WEIGHT: bold"><SPAN class=demo3 id=dontShow 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BACKGROUND-COLOR: pink">Don't 
show menu</SPAN> <SPAN class=demo3 id=showOne 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BACKGROUND-COLOR: lightgreen">Just 
first item</SPAN> <SPAN class=demo3 id=showAll 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BACKGROUND-COLOR: lightblue">Show 
all</SPAN> </P>
<H3>Html</H3><PRE>
&lt;div class="contextMenu" id="myMenu3"&gt;
&lt;ul&gt;
  &lt;li id="item_1"&gt;Item 1&lt;/li&gt;
  &lt;li id="item_2"&gt;Item 2&lt;/li&gt;
  &lt;li id="item_3"&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</PRE>
<H3>Javascript</H3><PRE>
$('span.demo3').contextMenu('myMenu3', {
  onContextMenu: function(e) {
	if ($(e.target).attr('id') == 'dontShow') return false;
	else return true;
  },
  onShowMenu: function(e, menu) {
	if ($(e.target).attr('id') == 'showOne') {
	  $('#item_2, #item_3', menu).remove();
	}
	return menu;
  }
});
</PRE>
</BODY>
</HTML>

JS代码(jquery.contextmenu.r2.js):

/* * ContextMenu - jQuery plugin for right-click context menus * * Author:Chris Domigan * Contributors:Dan G. Switzer,II * Parts of this plugin are inspired by Joern Zaefferer's Tooltip plugin * * Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * Version:r2 * Date:16 July 2007 * * For documentation visit http://www.trendskitchens.co.nz/jquery/contextmenu/ * */
(function($){
	var menu,shadow,trigger,content,hash,currentTarget;
	var defaults ={
	menuStyle:{
	listStyle:'none',padding:'1px',margin:'0px',backgroundColor:'#fff',border:'1px solid #999',width:'100px'}
,itemStyle:{
	margin:'0px',color:'#000',display:'block',cursor:'default',padding:'3px',border:'1px solid #fff',backgroundColor:'transparent'}
,itemHoverStyle:{
	border:'1px solid #0a246a',backgroundColor:'#b6bdd2'}
,eventPosX:'pageX',eventPosY:'pageY',shadow:true,onContextMenu:null,onShowMenu:null}
;
	$.fn.contextMenu = function(id,options){
	if (!menu){
	// Create singleton menu menu = $('<div id="jqContextMenu"></div>') .hide() .css({
	position:'absolute',zIndex:'500'}
) .appendTo('body') .bind('click',function(e){
	e.stopPropagation();
}
);
}
if (!shadow){
	shadow = $('<div></div>') .css({
	backgroundColor:'#000',position:'absolute',opacity:0.2,zIndex:499}
) .appendTo('body') .hide();
}
hash = hash || [];
	hash.push({
	id:id,menuStyle:$.extend({
}
,defaults.menuStyle,options.menuStyle ||{
}
),itemStyle:$.extend({
}
,defaults.itemStyle,options.itemStyle ||{
}
),itemHoverStyle:$.extend({
}
,defaults.itemHoverStyle,options.itemHoverStyle ||{
}
),bindings:options.bindings ||{
}
,shadow:options.shadow || options.shadow === false ? options.shadow:defaults.shadow,onContextMenu:options.onContextMenu || defaults.onContextMenu,onShowMenu:options.onShowMenu || defaults.onShowMenu,eventPosX:options.eventPosX || defaults.eventPosX,eventPosY:options.eventPosY || defaults.eventPosY}
);
	var index = hash.length - 1;
	$(this).bind('contextmenu',function(e){
	// Check if onContextMenu() defined var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e):true;
	if (bShowContext) display(index,this,e,options);
	return false;
}
);
	return this;
}
;
	function display(index,trigger,e,options){
	var cur = hash[index];
	content = $('#'+cur.id).find('ul:first').clone(true);
	content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover( function(){
	$(this).css(cur.itemHoverStyle);
}
,function(){
	$(this).css(cur.itemStyle);
}
).find('img').css({
	verticalAlign:'middle',paddingRight:'2px'}
);
	// Send the content to the menu menu.html(content);
	// if there's an onShowMenu,run it now -- must run after content has been added// if you try to alter the content variable before the menu.html(),IE6 has issues// updating the content if (!!cur.onShowMenu) menu = cur.onShowMenu(e,menu);
	$.each(cur.bindings,function(id,func){
	$('#'+id,menu).bind('click',function(e){
	hide();
	func(trigger,currentTarget);
}
);
}
);
	menu.css({
	'left':e[cur.eventPosX],'top':e[cur.eventPosY]}
).show();
	if (cur.shadow) shadow.css({
	width:menu.width(),height:menu.height(),left:e.pageX+2,top:e.pageY+2}
).show();
	$(document).one('click',hide);
}
function hide(){
	menu.hide();
	shadow.hide();
}
// Apply defaults $.contextMenu ={
	defaults:function(userDefaults){
	$.each(userDefaults,function(i,val){
	if (typeof val == 'object' && defaults[i]){
	$.extend(defaults[i],val);
}
else defaults[i] = val;
}
);
}
}
;
}
)(jQuery);
	$(function(){
	$('div.contextMenu').hide();
}
);

CSS代码(page_style.css):

HTML{BACKGROUND-COLOR:#d6e0f5}
BODY{BORDER-RIGHT:#ccc 5px solid;PADDING-RIGHT:15px;BORDER-TOP:#ccc 5px solid;PADDING-LEFT:15px;FONT-SIZE:13px;PADDING-BOTTOM:0px;BORDER-LEFT:#ccc 5px solid;WIDTH:640px;COLOR:#444;PADDING-TOP:0px;BORDER-BOTTOM:#ccc 5px solid;FONT-FAMILY:arial;BACKGROUND-COLOR:#fff}
H2{MARGIN:25px 0px 5px}
H3{MARGIN-BOTTOM:2px}
P{PADDING-RIGHT:10px;PADDING-LEFT:10px;PADDING-BOTTOM:10px;MARGIN:5px 0px;PADDING-TOP:10px}
PRE{BORDER-RIGHT:#ddd 1px dashed;BORDER-TOP:#ddd 1px dashed;MARGIN-LEFT:0px;BORDER-LEFT:#ddd 1px dashed;BORDER-BOTTOM:#ddd 1px dashed;BACKGROUND-COLOR:#eef}
LI{}
SPAN.demo1{PADDING-RIGHT:5px;PADDING-LEFT:5px;PADDING-BOTTOM:5px;MARGIN-RIGHT:20px;PADDING-TOP:5px;BACKGROUND-COLOR:yellow}
TABLE TH{PADDING-RIGHT:5px;VERTICAL-ALIGN:top;TEXT-ALIGN:right}
DL{MARGIN-LEFT:15px}
DT{FONT-WEIGHT:bold}

附件:下载该文件资源,减少时间成本(增值服务)