支持IE和FireFox的右键菜单

在网上找到这篇文章。原文只支持IE,把它改成支持FireFox。有时间把它进一步完善!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0053)http://www.7dspace.com/files/download/contentmenu.htm -->
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
	FONT-SIZE: 12px; MARGIN: 10px 0px 0px; FONT-FAMILY: "宋体"
}
.skin0 {
	BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; VISIBILITY: hidden; BORDER-LEFT: black 2px solid; WIDTH: 100px; CURSOR: default; LINE-HEIGHT: 20px; PADDING-TOP: 4px; BORDER-BOTTOM: black 2px solid; FONT-FAMILY: "宋体"; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.skin1 {
	BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; FONT-SIZE: 10pt; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 100px; CURSOR: default; PADDING-TOP: 4px; BORDER-BOTTOM: buttonhighlight 2px outset; FONT-FAMILY: "宋体"; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.menuitems {
	PADDING-RIGHT: 1px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
</STYLE>

<SCRIPT language=javascript>
<!-- 
//定义菜单显示的外观,可以从上面定义的2种格式中选择其一
var menuskin = "skin0"; 
//是否在浏览器窗口的状态行中显示菜单项目条对应的链接字符串
var display_url = false; 

function getEvent(){     //同时兼容ie和ff的写法
       if(document.all)    return window.event;        
       func=getEvent.caller;            
       while(func!=null){    
           var arg0=func.arguments[0];
           if(arg0){
               if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
                   || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){    
                   return arg0;
               }
           }
           func=func.caller;
       }
      return null;
}

function showmenuie5() {
//获取当前鼠标右键按下后的位置,据此定义菜单显示的位置
var event=arguments[0] || window.event;
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;

//如果从鼠标位置到窗口右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度
if (rightedge <ie5menu.offsetWidth)
	ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
//否则,就定位菜单的左坐标为当前鼠标位置
	ie5menu.style.left = document.body.scrollLeft + event.clientX;

//如果从鼠标位置到窗口下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度
if (bottomedge <ie5menu.offsetHeight)
	ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
//否则,就定位菜单的上坐标为当前鼠标位置
	ie5menu.style.top = document.body.scrollTop + event.clientY;

//设置菜单可见
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
//隐藏菜单
//很简单,设置visibility为hidden就OK!
ie5menu.style.visibility = "hidden";
}

function highlightie5(evt) {
//高亮度鼠标经过的菜单条项目

//如果鼠标经过的对象是menuitems,就重新设置背景色与前景色
//event.srcElement.className表示事件来自对象的名称,必须首先判断这个值,这很重要!
var event=evt || window.event;
var element=event.srcElement || event.target;
if (element.className == "menuitems") {
element.style.backgroundColor = "highlight";
element.style.color = "white";

//将链接信息显示到状态行
//event.srcElement.url表示事件来自对象表示的链接URL
if (display_url)
window.status = event.srcElement.url;
   }
}

function lowlightie5(evt) {
//恢复菜单条项目的正常显示
var event=evt || window.event;
var element=event.srcElement || event.target;
if (element.className == "menuitems") {
element.style.backgroundColor = "";
element.style.color = "black";
//window.status = "";
   }
}

//右键下拉菜单功能跳转
function jumptoie5(evt) {
//转到新的链接位置
var event=evt || window.event;
var element=event.srcElement || event.target;
//var seltext=window.document.selection.createRange().text
if (element.className == "menuitems") {
//如果存在打开链接的目标窗口,就在那个窗口中打开链接
if (element.getAttribute("target") != null)
{
window.open(element.getAttribute("url"), element.getAttribute("target"));
}
else
//否则,在当前窗口打开链接
window.location = element.getAttribute("url");
   }
}
//-->
</SCRIPT>

<META content="MSHTML 6.00.2900.3059" name=GENERATOR></HEAD>
<BODY>
<CENTER>
<P>点击右键看看效果-<A href="http://www.7dspace.com/" target=_blank>七度空间网页教学网</A> 
</P></CENTER>
<br>
<b id="test">点击右键看看效果</b>
<br>
<br>
<br>
<b id="test1">点击右键看看效果</b>


<DIV class=skin0 id=ie5menu onmouseover=highlightie5(event) onclick=jumptoie5(event); onmouseout=lowlightie5(event)>
<DIV class=menuitems url="javascript:history.back();">后退</DIV>
<DIV class=menuitems url="javascript:history.forward();">前进</DIV>
<HR>
<DIV class=menuitems url="http://www.7dspace.com/doc/news/index.htm" target="_blank">业界新闻</DIV>
<DIV class=menuitems url="http://www.7dspace.com/doc/guide/index.htm" target="_blank">建站指南</DIV>
<DIV class=menuitems url="http://www.7dspace.com/doc/web/index.htm" target="_blank">网页制作</DIV>
<DIV class=menuitems url="http://www.7dspace.com/doc/flash/index.htm" target="_blank">动画制作</DIV>
<HR>
<DIV class=menuitems url="http://www.7dspace.com/doc/effect/index.htm" target="_blank">网页特效</DIV>
<DIV class=menuitems url="http://www.7dspace.com/doc/program/index.htm" target="_blank">网络编程</DIV>
<HR>
<DIV class=menuitems url="http://www.7dspace.com/help/about.htm" target="_blank">关于本站</DIV>
<DIV class=menuitems url="http://www.7dspace.com/help/contact.htm">联系我们</DIV>
</DIV>

<SCRIPT language=JavaScript1.2>
//如果当前浏览器是Internet Explorer,document.all就返回真

//选择菜单方块的显示样式
//ie5menu=document.getElementById("ie5menu");
ie5menu.className = menuskin;

//重定向鼠标右键事件的处理过程为自定义程序showmenuie5
document.getElementById("test").oncontextmenu = showmenuie5;
document.getElementById("test1").oncontextmenu = showmenuie5;

//重定向鼠标左键事件的处理过程为自定义程序hidemenuie5
document.body.onclick = hidemenuie5;

</SCRIPT>
</BODY></HTML>






/*
 *  创建弹出div窗口。
    1、接口说明:DivWindow(id,title,width,height,content)  构造函数,创建一个弹出窗口对象
	    参数:id 弹出窗口id;
		      title:弹出窗口标题名称;
			  width:弹出窗口宽度
			  height:弹出窗口高度
			  content: 弹出窗口显示内容
    
	2、接口说明: closeDivWindow(id)  关闭窗口
	    参数: id 弹出窗口id
	
	3、接口说明:setPopupTopTitleFontColor(PopupTopTitleFontColor) 设置弹出窗口标题字体颜色
	       参数:

    4、接口说明:setPopupTopBgColor(tBgColor) 设置弹出窗口标题背景颜色

	5、接口说明:setPopupColor(borderColor,bgColor,tFontColor,cBgColor,fColor) 设置弹出窗口风格,包括标题栏的背景,弹出窗口边框颜色,内容窗体背景颜色,内容窗体字体颜色

	6、接口说明:open()

	使用方法: 
	    var a = new DivWindow("1","窗口测试",580,400,"Welcome to visited my personal website:<br><a href=http://www.youthfly.net target=_blank>http://www.youthfly.net</a><br><ahref=http://www ... youthfly.net</a><br><br>thx!!!=)..."L);
	    a.setPopupTopBgColor("black","blue","white","white","black");
		a.open();

	生成的html:
	<div id='"window"+id'></div>  控制背景的div,使背景逐渐变暗
  <div id='"windowTopBg"+id'>
	  <div id='"windowTop"+id'>
	    <span id='"windowTopTitle"+id'>title</span>
			<span id='"windowTopOperate"+id'>maxORmin</span>
			<span id='"windowTopClose"+id'>close</span>
	  </div>
	  <div id='"windowContent"+id'>content</div>
	</div>

	@author ERIC
	@date  2007.11.8
 */

var isIe = (document.all)?true:false;
var moveable=false; 
var topDivBorderColor = "#336699";//提示窗口的边框颜色 
var topDivBgColor = "#6795B4";//提示窗口的标题的背景颜色 
var contentBgColor = "white";//内容显示窗口的背景颜色
var contentFontColor = "black";//内容显示窗口字体颜色
var titleFontColor = "white"; //弹出窗口标题字体颜色
var index=1000000;//z-index;
// 创建弹出窗口,构造函数
function DivWindow(id,title,w,h,content)
{
  this.id = id;//窗口id
  this.zIndex = index +2;
  this.title = title;//弹出窗口名称
  this.message = content;//弹出窗口内容
  this.width = w;//弹出窗口宽度
  this.height = h;//弹出窗口高度
  this.left =  (document.body.clientWidth) ? (document.body.clientWidth - this.width)/2 : 0;//弹出窗口位置,距屏幕左边的位置
  this.top = (document.body.clientHeight) ? (document.body.clientHeight - this.height)/2 : 0;//弹出窗口位置,距屏幕上边的位置
  //this.init = init;
  //this.init();
}
//根据构造函数设定初始值,创建弹出窗口
DivWindow.prototype = {
  //设置弹出窗口标题字体颜色
  setPopupTopTitleFontColor:function(tFontColor)
  {
    titleFontColor = tFontColor;
  },
  //设置弹出窗口标题背景颜色
  setPopupTopBgColor:function(tBgColor)
  {
    topDivBgColor = tBgColor;
  },
  //设置弹出窗口风格,包括标题栏的背景,弹出窗口边框颜色,内容窗体背景颜色,内容窗体字体颜色
  setPopupColor:function(borderColor,bgColor,tFontColor,cBgColor,fColor)
  {
     topDivBorderColor = borderColor;
	 	 topDivBgColor = bgColor;
	   titleFontColor = tFontColor;
	   contentBgColor = cBgColor;
     contentFontColor = fColor;
  },
  //打开一个弹出窗口
  open: function()
  {
	  var sWidth,sHeight; 
	  sWidth=document.body.clientWidth; 
	  sHeight=document.body.clientHeight; 
	  var bgObj=document.createElement("div"); 
	  bgObj.setAttribute('id','window'+this.id); 
	  var styles={"top":"0px","left":"0px","position":"absolute","background":"#245","width":sWidth+'px',"height":sHeight+"px"};
	  if(isIe){
	  	styles.filter="alpha(opacity=0)";  
	  }
	  else
	  	styles.opacity=0;  
	  test(bgObj,styles);
	  document.body.appendChild(bgObj); 
	  //让背景逐渐变暗
	  showBackground(bgObj,25);

	  // 弹出窗口框体背景容器
	  var windowTopBgDiv = document.createElement("div"); 
	  windowTopBgDiv.setAttribute('id','windowTopBg'+this.id); 
	  windowTopBgDiv.style.position = "absolute"; 
	  windowTopBgDiv.style.zIndex = this.zIndex ;
	  windowTopBgDiv.style.width = this.width ;
	  windowTopBgDiv.style.height = this.height;
	  windowTopBgDiv.style.left = this.left;
	  windowTopBgDiv.style.top = this.top;
	  windowTopBgDiv.style.background = topDivBgColor;
	  windowTopBgDiv.style.fontSize = "9pt";
	  windowTopBgDiv.style.cursor = "default";
	  windowTopBgDiv.style.border = "1px solid " + topDivBorderColor;
	  windowTopBgDiv.onmousedown=function(){
		  if(windowTopBgDiv.style.zIndex!=index)
		  {
			 index = index + 2;
			 var idx = index;
			 windowTopBgDiv.style.zIndex=idx;
		  }
	  }; 
	  // 弹出窗口头部框体
	  var windowTopDiv =  document.createElement("div"); 
	  windowTopDiv.setAttribute('id','windowTop'+this.id); 
	  windowTopDiv.style.position = "absolute"; 
	  windowTopDiv.style.background = topDivBgColor;//"white"; 
	  windowTopDiv.style.color = titleFontColor; 
	  windowTopDiv.style.cursor = "move"; 
	  windowTopDiv.style.height = 20; 
	  windowTopDiv.style.width = this.width;
	  //开始拖动;
	  windowTopDiv.onmousedown=function(evt){
	  	var event=evt || window.event;
			if(event.button==1 || event.button==0)
			{
			  //锁定标题栏;
			  //windowTopDiv.setCapture();
			  if(windowTopDiv.setCapture)
					windowTopDiv.setCapture();
				else if(window.captureEvents)
					window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
			  //定义对象;
			  var win = windowTopDiv.parentNode;
			  //记录鼠标和层位置;
			  if(!event.clientX)event.clientX=event.pageX;
				if(!event.clientY)event.clientY=event.pageY;
			  x0 = event.clientX;
			  y0 = event.clientY;
			  //x0 = event.layerX?event.layerX:event.offsetX;
			  //y0 = event.layerY?event.layerY:event.offsetY;
			  x1 = parseInt(win.style.left);
			  y1 = parseInt(win.style.top);
			  //记录颜色;
			  //topDivBgColor = windowTopDiv.style.backgroundColor;
			  //改变风格;
			  //windowTopDiv.style.backgroundColor = topDivBorderColor;
			  win.style.borderColor = topDivBorderColor;
			  moveable = true;
			}
	  };
	  //停止拖动
	 
	  windowTopDiv.onmouseup=function(){
			if(moveable)
			{
			  var win = windowTopDiv.parentNode;
			  win.style.borderColor = topDivBgColor;
			  windowTopDiv.style.backgroundColor = topDivBgColor;
			  windowTopDiv.releaseCapture();
			  if(windowTopDiv.releaseCapture)
					windowTopDiv.releaseCapture();
				else if(window.captureEvents)
					window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
			  moveable = false;
			}
	 };
		  // 开始拖动
	 windowTopDiv.onmousemove=function(evt){
			if(moveable)
			{
				var event=evt || window.event;
		 		var arr = [0,400,0,300]
		 		if(!event.clientX)event.clientX=event.pageX;
				if(!event.clientY)event.clientY=event.pageY;
			  var win = windowTopDiv.parentNode;
				var a=x1 + event.clientX - x0;
				var b=y1 + event.clientY - y0;
			  win.style.left = a<arr[0]?arr[0]:a>arr[1]?arr[1]:a;
			  win.style.top = b<arr[2]?arr[2]:b>arr[3]?arr[3]:b;
			}
	  };
	  // 双击弹出窗口
	  windowTopDiv.ondblclick=function(){
		 	maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);
	  };

	  //增加一个弹出窗口标题的显示
	  var windowTopTitleSpan =  document.createElement("span"); 
	  windowTopTitleSpan.setAttribute('id','windowTopTitle'+this.id); 
	  windowTopTitleSpan.style.width = this.width-2*12-4; 
	  windowTopTitleSpan.style.paddingLeft = "3px"; 
	  windowTopTitleSpan.innerHTML = this.title; 
	 
	  //增加一个弹出窗口最小化,最大化的操作
	  var windowTopOperateSpan =  document.createElement("span"); 
	  windowTopOperateSpan.setAttribute('id','windowTopOperate'+this.id); 
	  windowTopOperateSpan.style.width = 12;
	  windowTopOperateSpan.style.borderWidth = "0px";
	  windowTopOperateSpan.style.color = titleFontColor;//"white";
	  windowTopOperateSpan.style.fontFamily = "webdings";
	  windowTopOperateSpan.style.cursor = "default"; 
	  windowTopOperateSpan.innerHTML = "0"; 
	  //最大化或者最小化弹出窗口操作
	  windowTopOperateSpan.onclick=function(){ 
		  maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);
	  };

		//增加一个弹出窗口关闭的操作
	  var windowTopCloseSpan =  document.createElement("span"); 
	  windowTopCloseSpan.setAttribute('id','windowTopClose'+this.id); 
	  windowTopCloseSpan.style.width = 12;
	  windowTopCloseSpan.style.borderWidth = "0px";
	  windowTopCloseSpan.style.color = titleFontColor;//"white";
	  windowTopCloseSpan.style.fontFamily = "webdings";
	  windowTopCloseSpan.style.cursor = "default";
	  windowTopCloseSpan.innerHTML = "r"; 
	  // 关闭窗口
	  windowTopCloseSpan.onclick=function(){  
		windowTopDiv.removeChild(windowTopTitleSpan); 
		windowTopDiv.removeChild(windowTopOperateSpan); 
		windowTopDiv.removeChild(windowTopCloseSpan); 
		windowTopBgDiv.removeChild(windowTopDiv);
		windowTopBgDiv.removeChild(windowContentDiv);
		document.body.removeChild(windowTopBgDiv); 
		document.body.removeChild(bgObj); 
	  };

	  // 内容
	 var windowContentDiv =  document.createElement("div"); 
	  windowContentDiv.setAttribute('id','windowContent'+this.id);  
	  windowContentDiv.style.background = contentBgColor; 
	  windowContentDiv.style.color = contentFontColor; 
	  windowContentDiv.style.cursor = "default"; 
	  windowContentDiv.style.height = (this.height - 20 -6);
	  windowContentDiv.style.width = this.width;
	  windowContentDiv.style.position = "relative";
	  windowContentDiv.style.left = 0;
	  windowContentDiv.style.top = 24;

	  windowContentDiv.style.lineHeight = "20px";
	  windowContentDiv.style.fontSize = "10pt";
	  windowContentDiv.style.wordBreak = "break-all";
	  windowContentDiv.style.padding = "3px";
	  windowContentDiv.innerHTML = this.message;

	  //将内容写入到文件中
	  windowTopDiv.appendChild(windowTopTitleSpan);
	  windowTopDiv.appendChild(windowTopOperateSpan);
	  windowTopDiv.appendChild(windowTopCloseSpan);
	  windowTopBgDiv.appendChild(windowTopDiv);
	  windowTopBgDiv.appendChild(windowContentDiv);
	  document.body.appendChild(windowTopBgDiv); 
  }
}

  //最大或者最小化探出窗口
  function maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv)
  {
    var win = windowTopOperateSpan.parentNode.parentNode;
	var tit = windowTopOperateSpan.parentNode;
	var flg = windowContentDiv.style.display=="none";
	if(flg)
	{
	  win.style.height = parseInt(windowContentDiv.style.height) + parseInt(tit.style.height) + 2*2;
	  windowContentDiv.style.display = "block";
	  windowTopOperateSpan.innerHTML = "0";
	}
	else
	{
	  win.style.height =  parseInt(tit.style.height) + 2*2;
	  windowTopOperateSpan.innerHTML = "2";
	  windowContentDiv.style.display = "none";	
	}
  }
  //让背景渐渐变暗  
  function showBackground(obj,endInt)  
  {  
   if(isIe)  
   {  
	  obj.filters.alpha.opacity+=1;  
	  if(obj.filters.alpha.opacity<endInt)  
	  {  
		setTimeout(function(){this.showBackground(obj,endInt)},5);  
	  }  
	}
	else
	{  
	  var al=parseFloat(obj.style.opacity);al+=0.01;  
	  obj.style.opacity=al;  
	  if(al<(endInt/100))  
	  {
	     setTimeout(function(){this.showBackground(obj,endInt)},5);
	  }  
	}  
  }
  //关闭弹出窗口
function closeDivWindow(id)
{
  var windowTopTitleSpan = document.getElementById("windowTopTitle"+id);
  var windowTopOperateSpan = document.getElementById("windowTopOperate"+id);
  var windowTopCloseSpan = document.getElementById("windowTopClose"+id);
  var windowTopDiv = document.getElementById("windowTop"+id);
  var windowTopBgDiv = document.getElementById("windowTopBg"+id);
  var windowContentDiv = document.getElementById("windowContent"+id);
  var bgObj = document.getElementById("window"+id);

  windowTopDiv.removeChild(windowTopTitleSpan); 
  windowTopDiv.removeChild(windowTopOperateSpan); 
  windowTopDiv.removeChild(windowTopCloseSpan); 
  windowTopBgDiv.removeChild(windowTopDiv);
  windowTopBgDiv.removeChild(windowContentDiv);
  document.body.removeChild(windowTopBgDiv); 
  document.body.removeChild(bgObj); 
}

function test(dom,styles){
	for(key in styles){
		dom.style[key]=styles[key];
	}
}

你可能感兴趣的:(编程,浏览器,IE,prototype,firefox)