js实现的XP风格的右键菜单

使用说明：
在使用前，先建立菜单对象 
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 变化 度 -----------//

网页特效|www.jb51.net|---XP风格的右键菜单
.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
}

');
}
//----------- 构建 子菜单 对象 -------------//
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 = '';
}
else
{
icon = '';
}

if(!thetitle||thetitle=="")
{
thetitle = '';
}

if(url&&url!="")
{
thelink += '';
}

var Oobj = document.getElementById(oldID);
/*--------------------------------------------- 菜单html样式

菜单一 4  

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

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'+word+'';
cells(1).calssName = "indentWord"

cells(2).className = "menutd1";
cells(2).innerHTML = "4";

cells(3).className = "menutd2";
cells(3).innerText = " ";

}

document.body.insertAdjacentHTML('beforeEnd','

');

}
//---------------- 生成连接 makeLink 方法 ------------//
function makeLink(subID,oldID,word,icon,url,target,thetitle)
{

var thelink = '';

if(icon&&icon!="")
{
icon = '';
}
else
{
icon = '';
}

if(!thetitle||thetitle=="")
{
thetitle = '';
}

if(url&&url!="")
{
thelink += '';
}

var Oobj = document.getElementById(oldID);

/*--------------------------------------------- 连接html样式

连接一  

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

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'+word+'';
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();

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

---

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

Oobj.rows(Oobj.rows.length-1).insertCell();
with(Oobj.rows(Oobj.rows.length-1))
{
cells(0).colSpan= 4;
cells(0).insertAdjacentHTML('beforeEnd','

---

');
}

}
//--------- 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)-----------------//
function ShowTheMenu(obj,num)
{
var topobj = eval(obj.substring(0,obj.length-2));

var trobj = eval("tr"+obj);

var obj = eval(obj);

if(num==0)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft +topobj.offsetWidth;
pixelTop = topobj.style.pixelTop + trobj.offsetTop;
}
}
if(num==1)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft + topobj.offsetWidth;
pixelTop = topobj.style.pixelTop + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;
}
}
if(num==2)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft - obj.offsetWidth;
pixelTop = topobj.style.pixelTop + trobj.offsetTop;
}
}
if(num==3)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft - obj.offsetWidth;
pixelTop = topobj.style.pixelTop + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;
}
}

obj.style.visibility = "visible";

if(obj.alphaing)
{
clearInterval(obj.alphaing);
}

obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed);
}
//----------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 -------//
function menu_alpha_down(obj,num)
{
var obj = eval(obj);

if(obj.filters.Alpha.Opacity > 0 )
{
obj.filters.Alpha.Opacity += -num;
}
else
{
clearInterval(obj.alphaing);
obj.filters.Alpha.Opacity = 0;
obj.alphaing = false;
obj.style.visibility = "hidden";
}
}
//------------ menu_alpha_up --------//
function menu_alpha_up(obj,num)
{
var obj = eval(obj);

if(obj.filters.Alpha.Opacity

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')")

有声音的哦…… 可以关闭！设置 mouseCanSound = false;
就可以了

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]