<!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>右键菜单</title>
<style type="text/css">
html,body{margin:0px;padding:0px;100%;height:100%;font-size:12px;overflow:show;}
.contextMenu{position:absolute;100px;height:50px;margin:100px;padding:2px;border:1px solid #cccccc;background-color:#F2F2EE;}
ul,li{list-style:none;margin:0px;padding:0px;}
.item{list-style:none;margin:0px;padding:0px;height:25px;line-height:25px;display:block;padding:0px;padding-left:10px;}
.itemOver{background-color:#316AC5;color:#fff;cursor:default;}
.separator{height:1px;border-top:1px solid #cccccc;margin:0px;padding:0px;}
</style>
<script type="text/javascript">
<!--
function contextMenu(props,events){
this.props = props;
this.events = events;
}
contextMenu.prototype.buildContextMenu = function(){
var menuObj = document.getElementById(this.props.menuID);
var targetEle = this.props.targetEle;
var eventFunc = this.events;
document.oncontextmenu = function(evt){
try{
clearEventBubble(evt);
var cobj = ele(evt);
if(cobj.className == targetEle){
var _items = menuObj.getElementsByTagName("li");
for(var i=0;i<_items.length;i++){
if(_items[i].className != "separator"){
_items[i].className = "item";
_items[i].onmouseover = function(){this.className ="item itemOver";};
_items[i].onmouseout = function(){this.className = "item";} ;
_items[i].onclick = function(){hide();func(this.id,cobj);};
}
}
var _bodyWidth = document.body.offsetWidth ||document.body.clientWidth;
var _bodyHeight = document.body.offsetHeight || document.body.clientHeight;
var _mWidth = menuObj.style.width;
var _mHeight = menuObj.offsetHeight;
menuObj.style.left =((parseInt(getX(evt))+parseInt(_mWidth)) > parseInt(_bodyWidth)?(parseInt(getX(evt))-parseInt(_mWidth)):getX(evt))+"px";
menuObj.style.top =((parseInt(getY(evt))+parseInt(_mHeight)) > parseInt(_bodyHeight)?(parseInt(getY(evt))-parseInt(_mHeight)):getY(evt))+"px";
menuObj.style.display = "block";
}else{
hide();
}
}catch(e){
}finally{
clearEventBubble(evt);
return false;
}
}
document.onclick = function(){hide();}
func = function(fid,srcEle){
eventFunc.bindings[fid](srcEle);
}
hide = function(){
try{
if(menuObj){
menuObj.style.display = "none";
}
}catch(e){}
}
ele = function(evt){
evt = evt||window.event;
return (evt.srcElement || evt.target);
}
}
/*==============================================================*/
function getX(evt){
evt = evt || window.event;
/**
CssRain---增加代码. 8月20日
使右键菜单，在有滚动条的情况下，也能正常在点击出弹出。
*/
var scrollPosX;
if (typeof window.pageYOffset != 'undefined') {
scrollPosX = window.pageXOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
scrollPosX = document.documentElement.scrollLeft;
}
else if (typeof document.body != 'undefined') {
scrollPosX = document.body.scrollLeft;
}
return (evt.x || evt.clientX || evt.pageX)+scrollPosX;
}
function getY(evt){
evt = evt || window.event;
/**
CssRain---增加代码. 8月20日
使右键菜单，在有滚动条的情况下，也能正常在点击出弹出。
*/
var scrollPosY;
if (typeof window.pageYOffset != 'undefined') {
scrollPosY = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
scrollPosY = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPosY = document.body.scrollTop;
}
return (evt.y || evt.clientY || evt.pageY)+scrollPosY;
}
function clearEventBubble(evt){
evt = evt || window.event;
if(evt.stopPropagation){
evt.stopPropagation();
}else{
evt.cancelBubble = true;
}
if(evt.preventDefault){
evt.preventDefault();
}else{
evt.returnValue = false;
}
}
//-->
</script>
</head>
<body>
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
<div id="c11" class="contextMenu" style="top:20px;left:100px;">c11 -- 右击我</div>
<div id="c22" class="contextMenu" style="top:20px;left:250px;">c22 -- 右击我</div>
<div id="c33" class="contextMenu" style="top:20px;left:400px;">c33 -- 右击我</div>
<div id="c44" class="contextMenu" style="top:20px;left:550px;">c44 -- 右击我</div>
<div id="bmenu" style="position:absolute;display:none;top:0px;left:0px;150px;margin:0px;padding:2px;border:1px solid #cccccc;background-color:#CEE2FF;">
<ul>
<li id="checkLink">检测连接</li>
<li id="edit">编辑</li>
<li id="del">删除</li>
<li class="separator"></li>
<li id="prop">属性</li>
</ul>
</div>
<br/>
</body>
<script type="text/javascript">
var cmenu = new contextMenu(
{
menuID : "bmenu",
targetEle : "contextMenu"
},
{
bindings:{
'checkLink' : function(o){alert("检测连接 "+o.id);},
'edit' : function(o){alert("编辑 "+o.id);},
'del' : function(o){alert("删除 "+o.id);},
'prop' : function(){alert("查看属性");}
}
}
);
cmenu.buildContextMenu();
</script>
<style>
*{
font-size:12px;
}
.highlight{
font-weight:bold;
color:red;
}
</style>
<p class="highlight">如果觉得代码对你有帮助 , 请广告支持cssrain.</p>
<div style="text-align:center:">
<script type="text/javascript"><!--
google_ad_client = "pub-0545040803774316";
/* 728x90, 创建于 08-6-5 */
google_ad_slot = "7034803449";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</html>