首页 > 特效插件 > 表格弹出层 >  简单的jQuery右键弹出菜单代码正文

简单的jQuery右键弹出菜单代码

特效介绍
jquery右键菜单

简单的jQuery右键弹出菜单代码。
运行下面的代码,对着空白的页面右键单击查看效果:


提示:您可以先修改部分代码再运行



使用方法
1、引入jQuery库:
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
2、引入下面的css:
<style type="text/css">
body{position:relative;}
body,ul,li,a{margin:0; padding:0; font-size:12px; color:#000; text-decoration:none;}
ul{padding:5px; width:128px; height:250px; position:absolute; top:100px; left:100px; box-shadow:1px 1px 3px #000; border-radius:3px; display:none;}
li{text-align:center; margin-top:5px; margin-bottom:5px; list-style:none;}
li a{display:block; height:20px; line-height:20px;}
li a:hover{background:#B7CBCA; color:#fff;}
.borderbottom{border-bottom:1px solid #B7CBCA;}
.colorgray{color:#A9A9A9}
</style>
3、引入下面的js和html:
<ul>
	<li><a href="###">显示桌面</a></li>
	<li class="borderbottom"><a href="#">刷新</a></li>
	<li><a href="http://www.5imoban.net/psdmoban">PSD模板</a></li>
	<li><a href="http://www.5imoban.net/cssmoban">CSS模板</a></li>
	<li><a href="http://www.5imoban.net/texiao">网页特效</a></li>
	<li class="borderbottom"><a href="http://www.5imoban.net/jiaocheng">建站教程</a></li>
	<li><a href="###" class="colorgray">粘贴</a></li>
	<li><a href="###" class="colorgray">粘贴快捷方式</a></li>
	<li class="borderbottom"><a href="###" class="colorgray">撤销删除</a></li>
	<li><a href="###">属性</a></li>
</ul>
<script type="text/javascript">
$(function(){
	$(this).bind("contextmenu",function(e){   //禁止鼠标右键弹出的默认菜单
          return false;   
    }).mousedown(function(e){
		var ul = $("ul");
		if(e.which == 3){   //判断鼠标是否右键
			ul.hide();
			//这里可得到鼠标X坐标
			var pointX = e.pageX;
			//这里可以得到鼠标Y坐标
			var pointY = e.pageY;
			ul.css("left",pointX+"px").css("top",pointY+"px").show(300);
		}else{
			ul.hide();
		}
	})
})
</script>