WebBuild

Windows XP 风格的右键菜单

作者:parno 日期:2006-08-18

字体大小: 小中大

使用说明：

在使用前，先建立菜单对象

复制内容到剪贴板

程序代码

var obj = new MouseMenu("obj");

注意，obj 要和 MouseMenu("obj") 的obj 相同

如建立了 obj 那么 obj 将会有以下方法，开始 obj.length = 0

方法：
1. addMenu(express[,icon][,url][,target][,title]);
功能：插入一个菜单，并且返回一个功能和上面说提起的 obj 一样的菜单对象
obj[obj.length] 然后 obj.length 将会 +1

说明：
express 必须，字符串，显示在插入的菜单上的文本
icon 可选，整数(>0)，如果后面有选项，你不需要ICON的话，填写 ""
url 可选，字符串，路径
target 可选，字符串就是 target
title 可选，字符串就是 title

2. addLink(express,[,icon][,url][,target][,title])
功能：插入一个连接然后 obj.length 将会 +1
说明
express 必须，字符串，显示在插入的菜单上的文本
icon 可选，整数(>0)，如果后面有选项，你不需要ICON的话，填写 ""
url 必须，字符串，路径
target 可选，字符串就是 target
title 可选，字符串就是 title

3. addHR()
功能：插入分割线
说明：
他不属于 link 和 menu 对象所以使用时，obj.length 不变

比如：

复制内容到剪贴板

程序代码

var MM = new MouseMenu("MM")
MM.addLink("连接","","http://hello.com")
MM.addHR()
MM.addMenu("菜单")
//下面是 MM[1] 而不是 MM[2] 因为 MM.addHR() MM.length 不会增加
MM[1].addLink("连接","","http://hello.com")

好了，说了这么多，应该会用了吧？
突然有人问：“在哪插入连接……”
…… 嗯~ 这个 ^_^! 看上面吧~~~~

附加：在代码中的其他的数据

复制内容到剪贴板

程序代码

//--------------- 有关数据 -----------------//

var IconList = new Array(); // icon图片集合，下标从 1 开始

IconList[1] = new Image();

IconList[1].src = "icon/sub.gif";

//--------------------------- 声音开关 ------ 声音开关 ------------------//
var mouseCanSound = true;

var menuSpeed = 50; //---------- 菜单显示速度 ------------//

var alphaStep = 30; //---------- Alpaha 变化度 -----------//

---------------------------------

#######################################################

以下为页面调用JS代码:

HTML代码

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---XP风格的右键菜单</title>
<STYLE>.menutable {
	BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #307ce8 1px solid; BORDER-LEFT: #307ce8 5px solid; BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; POSITION: absolute; Z-INDEX: 100
}
.menutrin {
	BACKGROUND-COLOR: #1a71e6; COLOR: #ffffff; CURSOR: hand
}
.menutrout {
	COLOR: #000000; CURSOR: hand
}
.menutd0 {
	HEIGHT: 25px; TEXT-ALIGN: center; WIDTH: 28px; 改变这个修改菜单高度--->: 
}
.menutd1 {
	FONT-FAMILY: Webdings; TEXT-ALIGN: right; WIDTH: 46px
}
.linktd1 {
	WIDTH: 46px
}
.menutd2 {
	WIDTH: 4px
}
.menuhr {
	BORDER-BOTTOM: #307ce8 1px inset; BORDER-LEFT: #307ce8 1px inset; BORDER-RIGHT: #307ce8 1px inset; BORDER-TOP: #307ce8 1px inset
}
</STYLE>
<BGSOUND id=theBS loop=0 src=""></HEAD>
<BODY bgColor=#eaf5fd style="FONT-SIZE: 10pt">
<SCRIPT><!----

/*-----------------------------------------------------------
鼠标右键菜单 1.0 Designed By Stroll  e-mail: csy-163@163.com
--------------------------------------------------------------*/

//---------------  有关数据 -----------------//

var IconList = new Array();   // icon图片 集合， 下标从 1 开始

IconList[1] = new Image();
	
	IconList[1].src = "skins/Nuvola/UBB/Icons/smiley.gif";
	
	IconList[2] = new Image();
	
	IconList[2].src = "skins/Nuvola/UBB/Icons/flash.gif";

IconList[3] = new Image();
	
	IconList[3].src = "skins/Nuvola/UBB/Icons/music.gif";	
	
	IconList[4] = new Image();
	
	IconList[4].src = "skins/Nuvola/UBB/Icons/mediaplayer.gif";

//----------------  检测变量 菜单的显示隐藏就靠它了！！！  ------------------//

var JustMenuID = "";

var SubMenuList = new Array();

var NowSubMenu = "";

var mouseCanSound = true;          //---------------------------  声音开关 ------  声音开关 ------------------//

var menuSpeed     =  50;   //---------- 菜单显示速度 ------------//

var alphaStep     =  30;   //---------- Alpaha 变化 度 -----------//
	
//------------- 构建 主菜单 对象 -------------//

function MouseMenu(objName)
{
	this.id           = "Menu_"+objName;
	this.obj          = objName;
	this.length  = 0;
	
	
	this.addMenu = addMenu;
	this.addLink = addLink;
	this.addHR   = addHR;	
	
	JustMenuID = this.id;
	
	document.body.insertAdjacentHTML('beforeEnd','<table id="'+this.id+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>');
}

//----------- 构建 子菜单 对象 -------------//

function SubMenu(objName,objID)
{
	this.obj = objName;
	this.id  = objID;

this.addMenu = addMenu;
	this.addLink = addLink;
	this.addHR   = addHR;

this.length  = 0;
}

//-------------- 生成 菜单 makeMenu 方法 -----------//
function makeMenu(subID,oldID,word,icon,url,target,thetitle)
{
	var thelink = '';

if(icon&&icon!="")
	{
		icon = '<img border="0" src="'+IconList[icon].src+'">';
	}
	else
	{
		icon = '';
	}
	
	if(!thetitle||thetitle=="")
	{
		thetitle = '';
	}
	
	
	if(url&&url!="")
	{
		thelink += '<a href="'+url+'" ';
		
		if(target&&target!="")
		{
			thelink += '  ';
			thelink += 'target="'+target+'" '
		}
		
		thelink += '></a>';
	}
	
	var Oobj = document.getElementById(oldID);

/*--------------------------------------------- 菜单html样式
	
          <tr class="menutrout" id="trMenu_one_0" title="I am title">
      <td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td>
      <td><a href="javascript:alert('I am menu');" target="_self"></a><nobr>菜单一</nobr></td>
      <td class="menutd1">4</td>
      <td class="menutd2"> </td>
    </tr>

--------------------------------------------------*/
	
	Oobj.insertRow();

with(Oobj.rows(Oobj.rows.length-1))
	{
		id 			= "tr"+subID;
		className	= "menutrout";
		
		title       = thetitle;

}
	
	eventObj = "tr"+subID;
	
	eval(eventObj+'.attachEvent("onmouseover",MtrOver('+eventObj+'))');	
	eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');	
		
	var trObj = eval(eventObj);

for(i=0;i<4;i++)
	{
		trObj.insertCell();
	}

with(Oobj.rows(Oobj.rows.length-1))
	{
		cells(0).className = "menutd0";
		cells(0).innerHTML = icon;

cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>';
		cells(1).calssName = "indentWord"
		
		cells(2).className = "menutd1";
		cells(2).innerHTML = "4";
		
		cells(3).className = "menutd2";
		cells(3).innerText = " ";
		
	}	
	
	
	
	document.body.insertAdjacentHTML('beforeEnd','<table id="'+subID+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>');
	
	
		
}

//---------------- 生成连接 makeLink 方法 ------------//
function makeLink(subID,oldID,word,icon,url,target,thetitle)
{
	
	
	var thelink = '';
	
	if(icon&&icon!="")
	{
		icon = '<img border="0" src="'+IconList[icon].src+'">';
	}
	else
	{
		icon = '';
	}
	
	if(!thetitle||thetitle=="")
	{
		thetitle = '';
	}
	
	
	if(url&&url!="")
	{
		thelink += '<a href="'+url+'" ';
		
		if(target&&target!="")
		{
			thelink += '  ';
			thelink += 'target="'+target+'" '
		}
		
		thelink += '></a>';
	}
	
	var Oobj = document.getElementById(oldID);
	
	
	/*--------------------------------------------- 连接html样式
	
          <tr class="menutrout" id="trMenu_one_0" title="I am title">
      <td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td>
      <td><a href="javascript:alert('I am link');" target="_self"></a><nobr>连接一</nobr></td>
      <td class="linktd1"></td>
      <td class="menutd2"> </td>
    </tr>

--------------------------------------------------*/	
	
	Oobj.insertRow();

with(Oobj.rows(Oobj.rows.length-1))
	{
		id 			= "tr"+subID;
		className	= "menutrout";		
		title       = thetitle;

}
	
	eventObj = "tr"+subID;
	
	eval(eventObj+'.attachEvent("onmouseover",LtrOver('+eventObj+'))');	
	eval(eventObj+'.attachEvent("onmouseout",LtrOut('+eventObj+'))');		
	eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');	
		
	var trObj = eval(eventObj);

for(i=0;i<4;i++)
	{
		trObj.insertCell();
	}

with(Oobj.rows(Oobj.rows.length-1))
	{
		cells(0).className = "menutd0";
		cells(0).innerHTML = icon;

cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>';

cells(2).className = "linktd1";
		cells(2).innerText = " ";
		
		cells(3).className = "menutd2";
		cells(3).innerText = " ";
		
	}

}

//-------------- 菜单对象 addMenu 方法 ------------//
function addMenu(word,icon,url,target,title)
{
	var subID    = this.id + "_" + this.length;
	var subObj  = this.obj+"["+this.length+"]";
	
	var oldID   = this.id;
	
	eval(subObj+"= new SubMenu('"+subObj+"','"+subID+"')");
	
         makeMenu(subID,oldID,word,icon,url,target,title);
         
         this.length++;
	
}

//------------- 菜单对象 addLink 方法 -------------//
function addLink(word,icon,url,target,title)
{
	var subID    = this.id + "_" + this.length;
	var oldID  = this.id;
	
         makeLink(subID,oldID,word,icon,url,target,title);
         
         this.length++;	
}

//------------ 菜单对象 addHR 方法 -----------------//
function addHR()
{
	var oldID = this.id;

var Oobj = document.getElementById(oldID);
	
	Oobj.insertRow();
	
	/*------------------------------------------
	
         <tr>
      <td colspan="4">
		<hr class="menuhr" size="1" width="95%">
       </td>
    </tr>
	
	--------------------------------------------*/

Oobj.rows(Oobj.rows.length-1).insertCell();

with(Oobj.rows(Oobj.rows.length-1))
	{
		cells(0).colSpan= 4;
		cells(0).insertAdjacentHTML('beforeEnd','<hr class="menuhr" size="1" width="95%">');		
	}	
	
}

//--------- MtrOver(obj)-------------------//
function MtrOver(obj)
{
	return sub_over;
	
	function sub_over()
	{
	
		var sonid = obj.id.substring(2,obj.id.length);
		
		var topobj = obj.parentElement.parentElement; 
		
		NowSubMenu = topobj.id;
		
		if(obj.className=="menutrout")
		{
			mouseWave();
		}		
		
		HideMenu(1);		
		
		SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;

ShowTheMenu(sonid,MPreturn(sonid))		
		
		SubMenuList[returnIndex(obj.id)] = sonid;
		
		if(topobj.oldTR)
		{ 
			eval(topobj.oldTR+'.className = "menutrout"'); 
		}

obj.className = "menutrin";

topobj.oldTR = obj.id;

}
}

//--------- LtrOver(obj)-------------------//
function LtrOver(obj)
{
	return sub_over;
	
	function sub_over()
	{
		var topobj = obj.parentElement.parentElement;

NowSubMenu = topobj.id;
		
		HideMenu(1);
		
		SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;
				
		if(topobj.oldTR)
		{ 
			eval(topobj.oldTR+'.className = "menutrout"'); 
		}

obj.className = "menutrin";

topobj.oldTR = obj.id;

}
}

//--------- LtrOut(obj)-------------------//
function LtrOut(obj)
{
	return sub_out;
	
	function sub_out()
	{
		var topobj = obj.parentElement.parentElement; 
		
		obj.className = "menutrout"; 
		
		topobj.oldTR = false; 
	}
}

//----------MtrClick(obj)-----------------//

function MtrClick(obj)
{
	return sub_click;
	
	function sub_click()
	{
		if(obj.cells(1).all.tags("A").length>0)
		{
			obj.cells(1).all.tags("A")(0).click();
		}

}
}

//---------- returnIndex(str)--------------//

function returnIndex(str)
{
	return (str.split("_").length-3)
}

//---------ShowTheMenu(obj,num)-----------------//

//----------HideMenu(num)-------------------//

/*----------------------
var SubMenuList = new Array();

var NowSubMenu = "";

---------------------*/

function HideMenu(num)
{
	var thenowMenu = "";
	
	var obj = null;
	
	if(num==1)
	{
		thenowMenu = NowSubMenu
	}
	
	
	
	for(i=SubMenuList.length-1;i>=0;i--)
	{
		if(SubMenuList[i]&&SubMenuList[i]!=thenowMenu)
		{
			
			obj = eval(SubMenuList[i]);
			
			if(obj.alphaing)
			{
				clearInterval(obj.alphaing);
			}

obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);
			
			obj.style.visibility = "hidden";		
			
			eval("tr"+SubMenuList[i]).className = "menutrout";
						
			SubMenuList[i] = null;	
		}
		else
		{
			if(SubMenuList[i]==thenowMenu)
			{
				return;
			}
		}
	}
	
	NowSubMenu = "";
}

//-----------MainMenuPosition return()------------//

function MMPreturn()
{
	var obj = eval(JustMenuID);
	
	var x = event.clientX;
	var y = event.clientY;
	
	var judgerX = x + obj.offsetWidth;
	var judgerY = y + obj.offsetHeight;

var px = 0;
	var py = 0;
	
	if(judgerX>document.body.clientWidth)
	{
		px = 2;
	}
	if(judgerY>document.body.clientHeight)
	{
		py = 1;
	}
		
	return (px+py);
}

//-----------MenuPosition return(obj)--------------//

function MPreturn(obj)
{
	var topobj = eval(obj.substring(0,obj.length-2));
	
	var trobj  = eval("tr"+obj);
	
	var x = topobj.style.pixelLeft + topobj.offsetWidth;
	var y = topobj.style.pixelTop  + trobj.offsetTop;

obj = eval(obj);
	
	var judgerY =  obj.offsetHeight + y;
	var judgerX =  obj.offsetWidth  + x;
	
	var py = 0;
	var px = 0;
	
	if(judgerY>=document.body.clientHeight)
	{
		py = 1;
	}
	
	if(judgerX>= document.body.clientWidth)
	{
		px = 2;
	} 
			
	return (px+py);
}

//-----------mouseWave()-------------//

function mouseWave()
{
	if(mouseCanSound)
	{
		theBS.src= "sound/sound.wav";
	}	
}

//----------- menu_alpha_down -------//

//------------ menu_alpha_up --------//

function menu_alpha_up(obj,num)
{
		var obj = eval(obj);
		
		if(obj.filters.Alpha.Opacity<100)
			obj.filters.Alpha.Opacity += num;
		else
		{	
			clearInterval(obj.alphaing);
			obj.filters.Alpha.Opacity = 100;
			obj.alphaing = false;
		}	
}

//----------- IE ContextMenu -----------------//

function document.oncontextmenu()
{
	return false;
}

//----------- IE Mouseup ----------------//

function document.onmouseup()
{
	if(event.button==2)
	{
	
		HideMenu(0);

}
}

//---------- IE MouseDown --------------//

function document.onmousedown()
{
	if(event.button==1)
	{
		HideMenu();
		
		var obj = eval(JustMenuID)
		
		if(obj.alphaing)
		{
			clearInterval(obj.alphaing);
		}
		
		obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);
		
	}
}
//----->

</SCRIPT>

<SCRIPT>
	var one = new MouseMenu("one");
	
	one.addMenu("菜单一",1,"javascript:alert('I am menu');","_self","I am title");
		one[0].addLink("连接一",2,"javascript:alert('I am link')")
		one[0].addHR()
		one[0].addLink("连接二","","javascript:alert('I am link')")		
		one[0].addMenu("菜单三");
			one[0][one[0].length-1].addLink("连接一",1,"javascript:;")
		one[0].addLink("连接三","","javascript:alert('I am link')")
		one[0].addLink("连接四","","javascript:alert('I am link')")
	one.addLink("连接二","","javascript:alert('I am link')")
	one.addMenu("菜单二",3);
		one[2].addLink("连接一","","javascript:alert('I am link')")
	one.addHR();
	one.addLink("连接三，多长都可以",4,"javascript:alert('I am link')")

</SCRIPT>

<P><FONT color=#1a71e6>有声音的哦…… 可以关闭！设置 mouseCanSound = false; 
就可以了</FONT></P></BODY></HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[本日志由 parno 于 2007-04-03 02:38 AM 编辑]