您的位置：首页 > Web前端 > JQuery

一个jquery实现右键菜单,兼容FF

2009-12-23 16:17 676 查看 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<mce:style type="text/css"><!--
*{padding:0px;margin:0px;font-size:12px;}
#outerDiv
{
position:absolute;
border-top:1px solid #BEBEBE;
border-left:1px solid #BEBEBE;
border-bottom:1px solid #7F7F7F;
border-right:1px solid #7F7F7F;
display:none;
outline:0px;
}
#menuDiv
{	width:100px;
background:#D4D0C8;letter-spacing:2px;
padding:2px 4px 2px 4px;
border-top:1px solid white;
border-left:1px solid white;
border-right:1px solid #3F3F3F;
border-bottom:1px solid #3F3F3F;
outline:0px;
}
#menuDiv .link
{	display:block;padding:4px 4px 4px 4px;width:100%;
margin-top:0px;
border:1px solid #D4D0C8;
color:black;
outline:0px;
cursor: default;
}
#menuDiv .link :hover
{
background-color:#9496AD;
border:1px solid #0033CC;

}
#menuDiv .hr
{   margin-top:3px;
border-bottom:1px solid #FFFFFF;
border-top:1px solid #848284;
display:block;
width:100%;heigth:0px;line-height:0px;
}

--></mce:style><style type="text/css" mce_bogus="1">    *{padding:0px;margin:0px;font-size:12px;}
#outerDiv
{
position:absolute;
border-top:1px solid #BEBEBE;
border-left:1px solid #BEBEBE;
border-bottom:1px solid #7F7F7F;
border-right:1px solid #7F7F7F;
display:none;
outline:0px;
}
#menuDiv
{	width:100px;
background:#D4D0C8;letter-spacing:2px;
padding:2px 4px 2px 4px;
border-top:1px solid white;
border-left:1px solid white;
border-right:1px solid #3F3F3F;
border-bottom:1px solid #3F3F3F;
outline:0px;
}
#menuDiv .link
{	display:block;padding:4px 4px 4px 4px;width:100%;
margin-top:0px;
border:1px solid #D4D0C8;
color:black;
outline:0px;
cursor: default;
}
#menuDiv .link :hover
{
background-color:#9496AD;
border:1px solid #0033CC;

}
#menuDiv .hr
{   margin-top:3px;
border-bottom:1px solid #FFFFFF;
border-top:1px solid #848284;
display:block;
width:100%;heigth:0px;line-height:0px;
}
</style>
<mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function(){
$(document).bind("contextmenu",function(){
return false;
});
$("body").bind("mouseup",function(){
if(document.activeElement != document.body) return;
if(event.button == 2) showMenu();
});
$(".link","#outerDiv").hover(function(){
$(this).css({ "background-color" : "#9496AD" ,border : "1px solid #0033CC" });
},function(){
$(this).css({ "background-color" : "#D4D0C8" ,border : "1px solid #D4D0C8" });
});
});
function showMenu(){
var outerDiv = $("#outerDiv");
$("#menuDiv").attr("tabindex","0");
outerDiv.css({left:event.clientX+3,top:event.clientY+8});
if(outerDiv.css("display") != "none")
outerDiv.hide();
outerDiv.fadeIn(300);
outerDiv.bind("blur",function(){setTimeout(outerClick,0)});
$("*",outerDiv).bind("blur",function(){setTimeout(outerClick,0)}).
bind("selectstart",function(){return false});
$("#menuDiv").focus();

}
function outerClick(){
if($(document.activeElement).parents("#outerDiv").length ==0)
$("#outerDiv").hide();
}

// --></mce:script>
</head>
<body>

<div id="outerDiv">
<div id="menuDiv">
<span class="link" onclick="javascript:alert('链接')">我是链接一</span>
<span class="hr"></span>
<span class="link" onclick="javascript:alert('链接')">我是链接二</span>
<span class="hr"></span>
<span class="link" onclick="javascript:alert('链接')">我是链接三</span>
</div>
</div>
<div id="text">

</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航