支持IE和FireFox的右键菜单

最新推荐文章于 2022-04-11 15:53:58 发布

melin1204

最新推荐文章于 2022-04-11 15:53:58 发布

阅读量188

点赞数

分类专栏： AJAX 文章标签： IE Firefox 编程浏览器 prototype

AJAX 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

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

</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 οnmοuseοver=highlightie5(event) οnclick=jumptoie5(event); οnmοuseοut=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>

[/code]

[code]

/*
* 创建弹出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.οnmοusedοwn=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.οnmοusedοwn=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.οnmοuseup=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.οnmοusemοve=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.οndblclick=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.οnclick=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.οnclick=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];
}
}[/code]