jQuery鼠标右键弹出菜单选项特效代码

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

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

以下是 jQuery鼠标右键弹出菜单选项特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery鼠标右键弹出菜单选项</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.content{margin:0 auto;width:360px;}
.content p{margin:20px 0 0 0;border:solid 1px #C5D8FF;background:#EDF2FF;padding:10px;}
</style>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.contextmenu.r2.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$('.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'
		}
	});


	$('.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;
		}
	
	});
	

});
</script>

<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>


<div class="content">
	<p class="demo1"><b>演示</b> 右键单击我的! !</p>
	
	<p class="demo2">在这个段落里面右键点击触发菜单</p>
	
	<p style="font-weight: bold;">
		<span class="demo3" id="dontShow" style="padding: 5px; background-color:pink">不显示菜单</span>
		<span class="demo3" id="showOne" style="padding: 5px;background-color:lightgreen">显示第一项</span>
		<span class="demo3" id="showAll" style="padding: 5px;background-color:lightblue">全部显示</span>
	</p>
</div>
</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();
}
);

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