在一个页面中使用多个仿QQ菜单

其实改这个菜单并不难，把全局变量改成this或用参数传递对象就可以了，唯一的难度在于 setTimeout不支持把对象作为参数传递，最后是用了阿信blog的一个方法重写setTimeout解决的，有兴趣可以看看http://blog.csdn.net/fason/archive/2004/07/30/56393.aspx

其中选项卡的效果来自蓝色理想http://www.blueidea.com/tech/web/2006/3599_2.asp

完整代码如下（不支持FF）：

 

< html >
< head >
< title > 支持多个outlookbar的版本 </ title >

   <!-- Modify by showlin 2007, http://blog.csdn.net/showlin -->
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< style  type ="text/css" > ...
A:link {...}{ COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}
A:visited {...}{ COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}
A:hover {...}{ COLOR: #006CD9; FONT-SIZE: 12px; TEXT-DECORATION: none}
body,table,tr,td{...}{
 font-size:12px;
 color:#000000;
 line-height: 150%
 }
 body{...}{margin:0 0 0 0;}
.sec1 {...}{ 
    background-color: #e5e8ef;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid #FFFFFF
    }
.sec2 {...}{ 
    background-color:#3399FF;
    cursor: hand;
    color: #FFFFFF;
    border-left: 1px solid #FFFFFF; 
    border-top: 1px solid #FFFFFF; 
    border-right: 1px solid gray; 
    border-bottom: 1px solid #FFFFFF
    font-weight: bold; 
    }
.main_tab {...}{
    background-color: #f0f0f0;
    color: #000000;
    border-left:1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray; 
    }
</ style >
< script  language ="javascript" > ...
<!--
var _st = window.setTimeout;
window.setTimeout = function(fRef, mDelay) ...{
 if(typeof fRef == 'function')...{
  var argu = Array.prototype.slice.call(arguments,2);
  var f = (function()...{ fRef.apply(null, argu); });
  return _st(f, mDelay);
 }
 return _st(fRef,mDelay);
}


function secBoard(n,x,y)
...{
  for(i=0;i<secTable.cells.length;i++)...{
    secTable.cells[i].className="sec1";
  secTable.cells[n].className="sec2";}
  for(i=0;i<mainTable.tBodies.length;i++)...{
    mainTable.tBodies[i].style.display="none";
  mainTable.tBodies[n].style.display="block";}
//  weizi.innerHTML="<b>"+x.toUpperCase()+"</b>展馆<b>"+y+"</b>楼展厅";
}
//-->
</ script >

</ head >  
< body  bgcolor ="#FFFFFF"  text ="#000000"  leftmargin ="0"  topmargin ="0" >  
< script  language ="JavaScript" > ...
<!--
function showitem(id,name,target,image)
...{
    var temp;
    if (id=="javascript:void(0);")
        temp="<span><a href='"+id+"' οnclick="+target+">"+name+"</a></span><br>"
    else
        temp="<span><a href='"+id+"' target="+target+">"+name+"</a></span><br>"
    if (image)
        temp="<img src="" + image + "" border="0" align="absmiddle" hspace="5" vspace="5">" + temp;
    return (temp)
}
function switchout1(out1,number)
...{    
//    alert(out1.id);
    var i = out1.opentitle;
    out1.opentitle=number;
    var id1,id2,id1b,id2b
    if (number!=i && out1.outlooksmoothstat==0)...{
        if (number!=-1)
        ...{
            if (i==-1)...{
                id2=out1+"_blankdiv";
                id2b=out1+"_blankdiv";
            }
            else...{
                id2=out1.id + "_div"+i;
                id2b=out1.id + "_divin"+i;
                document.all(out1.id + "_title"+i).style.border="1px none navy";
                document.all(out1.id + "_title"+i).style.background=out1.maincolor;
                document.all(out1.id + "_title"+i).style.color="#ffffff";
                document.all(out1.id + "_title"+i).style.textalign="center";
            }
            id1=out1.id + "_div"+number
            id1b=out1.id + "_divin"+number
            document.all(out1.id + "_title"+number).style.border="1px none white";
            document.all(out1.id + "_title"+number).style.background=out1.maincolor; //title
            document.all(out1.id + "_title"+number).style.color="#ffffff";
            document.all(out1.id + "_title"+number).style.textalign="center";
            smoothout(id1,id2,id1b,id2b,0,out1);
        }
        else
        ...{
            document.all(out1.id + "_blankdiv").style.display="";
            document.all(out1.id + "_blankdiv").sryle.height="100%";
            document.all(out1.id + "_div"+i).style.display="none";
            document.all(out1.id + "_div"+i).style.height="0%";
            document.all(out1.id + "_title"+i).style.border="1px none navy";
            document.all(out1.id + "_title"+i).style.background=out1.maincolor;
            document.all(out1.id + "_title"+i).style.color="#ffffff";
            document.all(out1.id + "_title"+i).style.textalign="center";
        }
    }
}
function smoothout(id1,id2,id1b,id2b,stat,obj)
...{
    if(stat==0)...{
        obj.tempinnertext1=document.all(id1b).innerHTML;
        obj.tempinnertext2=document.all(id2b).innerHTML;
        document.all(id1b).innerHTML="";
        document.all(id2b).innerHTML="";
        obj.outlooksmoothstat=1;
        document.all(id1b).style.overflow="hidden";
        document.all(id2b).style.overflow="hidden";
        document.all(id1).style.height="0%";
        document.all(id1).style.display="";

//        setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+out1.inc+")",out1.timedalay);
        setTimeout(smoothout,obj.timedalay,id1,id2,id1b,id2b,obj.inc,obj);
    }
    else
    ...{
        stat+=obj.inc;
        if (stat>100)
            stat=100;
        document.all(id1).style.height=stat+"%";
        document.all(id2).style.height=(100-stat)+"%";
        if (stat<100) 
//            setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+stat+")",out1.timedalay);
            setTimeout(smoothout,obj.timedalay,id1,id2,id1b,id2b,stat,obj);
        else
        ...{
            document.all(id1b).innerHTML=obj.tempinnertext1;
            document.all(id2b).innerHTML=obj.tempinnertext2;
            obj.outlooksmoothstat=0;
            document.all(id1b).style.overflow="auto";
            document.all(id2).style.display="none";
        }
    }
}
function getOutLine()
...{
    outline="<table "+this.otherclass+">";
    for (i=0;i<(this.titlelist.length);i++)
    ...{
//        outline+="<tr><td name=outlooktitle"+i+" id=outlooktitle"+i+" " + "index=" + i + " "; 
        outline+="<tr><td name=" + this.id + "_title"+i+" id=" + this.id + "_title"+i+" " + "index=" + i + " "; 
        if (i!=this.opentitle) 
            outline+=" nowrap align=center style='cursor:hand;background-color:"+this.maincolor+";color:#ffffff;height:20;border:1 none navy' ";
        else
            outline+=" nowrap align=center style='cursor:hand;background-color:"+this.maincolor+";color:white;height:20;border:1 none white' ";
        outline+=this.titlelist[i].otherclass
//        outline+=" οnclick='switchout1("+i+")'"
        outline+="><span class=smallFont>";
        outline+=this.titlelist[i].title+"</span></td></tr>";
        outline+="<tr><td name=" + this.id +"_div"+i+" id=" + this.id + "_div"+i+ " " + this.tdclass 
        if (i!=this.opentitle) 
            outline+=";display:none;height:0%;";
        else
            outline+=";display:;height:100%;";
        outline+="'><div name=" + this.id + "_divin"+i+" id=" + this.id + "_divin"+i+" style='overflow:auto;width:100%;height:100%'>";
        for (j=0;j<this.itemlist[i].length;j++)
            outline+=showitem(this.itemlist[i][j].key,this.itemlist[i][j].title,this.itemlist[i][j].target,this.itemlist[i][j].image);
        outline+="</div></td></tr>"
    }
    outline+="</table>"
    return outline
}
function show()
...{
    var outline;
    outline="<div id=" + this.id + "name=" + this.id + " style='width=100%;height:100%'>"
    outline+=this.getOutLine();
    outline+="</div>"
    document.write(outline);
    addclick(this);
}

function addclick(obj)...{
    var i,tempobj;
    var out1=obj;
    for (i=0;i<(obj.titlelist.length);i++)...{
        var tempobj=document.getElementById(out1.id + "_title"+i);
        tempobj.onclick=function()...{
            switchout1(out1,this.index);
        }
    }
}

function theitem(intitle,instate,inkey,intarget,image)
...{
    this.state=instate;
    this.otherclass=" nowrap ";
    this.key=inkey;
    this.title=intitle
    this.target=intarget;
    this.image=image;
}
function addtitle(intitle)
...{

    this.itemlist[this.titlelist.length]=new Array();
    this.titlelist[this.titlelist.length]=new theitem(intitle,1,0,"","");
    return(this.titlelist.length-1);
}
function additem(intitle,parentid,inkey,intarget,image)
...{    
    if (parentid>=0 && parentid<=this.titlelist.length)
    ...{
        this.itemlist[parentid][this.itemlist[parentid].length]=new theitem(intitle,2,inkey,intarget,image);
        this.itemlist[parentid][this.itemlist[parentid].length-1].otherclass=" nowrap align=left style='height:5' ";
        return(this.itemlist[parentid].length-1);
    }
    else
        additem=-1;
}
function outlook(id)
...{
    this.id=id;
    this.titlelist=new Array();
    this.itemlist=new Array();
    this.divstyle="style='height:100%;width:100%;overflow:auto' align=center";
    this.otherclass="border=0 cellspacing='0' cellpadding='0' style='height:100%;width:100%' valign=middle align=left ";
    this.addtitle=addtitle;
    this.additem=additem;
    this.starttitle=-1;
    this.show=show;
    this.getOutLine=getOutLine;
    this.opentitle=this.starttitle;
    this.reflesh=outreflesh;
    this.timedelay=1000;
    this.inc=10;
    this.maincolor = "#336699";
    this.tdclass=" valign=top align=left style='padding-left:10px;width:100%";
    this.tempinnertext1="";
    this.tempinnertext2="";
    this.outlooksmoothstat=0;
}
function outreflesh()
...{
    document.all(this.id).innerHTML=this.getOutLine();
}
function locatefold(obj,foldname) //定位到某个title
...{
    if (foldname=="")
        foldname = obj.titlelist[0].title
    for (var i=0;i<obj.titlelist.length;i++)
    ...{
        if(foldname==obj.titlelist[i].title)
        ...{
            obj.starttitle=i;
            obj.opentitle=i;
        }
    }
}
//-->
</ script >

< table  width ="170"  border ="0"  cellspacing ="1"  cellpadding ="4"  align ="center"  height =100% >
   < tr >  
     < td  height ="4" ></ td >
   </ tr >  
   < tr >  
     < td >  
       < table  border =0  cellspacing =0  cellpadding =0  width =100%  id =secTable >
         < tr  height =20  align =center >  
           < td  class =sec2  width =10%  onClick ="secBoard(0,'a','1')" > 菜单1 </ td >
           < td  class =sec1  width =10%  onClick ="secBoard(1,'a','2')" > 菜单2 </ td >
           < td  class =sec1  width =10%  onClick ="secBoard(2,'b','1')" > 菜单3 </ td >
         </ tr >
       </ table >
       < table  border =0  cellspacing =0  cellpadding =0  width =100%  id =mainTable  class =main_tab  height =90% >
         < tbody  style ="display:block;" >  
         < tr >  
           < td  align ="center"  height =100% >
           < script > ...
var out1=new outlook("out1");
var t;
t=out1.addtitle('项目1')
out1.additem('带图片链接1',t,'http://blog.csdn.net/showlin/','_target','images/new/diary.gif')
out1.additem('文字链接2',t,'abc.html','mainFrame')


t=out1.addtitle('项目2')
out1.additem('onclick事件',t,'javascript:void(0);','alert(1);')


locatefold(out1,"项目1");
out1.show() 
</ script >
</ td >
         </ tr >
         </ tbody >
         < tbody  style ="display:none;" >  
         < tr >  
           < td  align ="center" >
           < script > ...
var out2=new outlook("out2");
var t2;
t2=out2.addtitle('项目3')
out2.additem('带图片链接2',t2,'http://blog.csdn.net/showlin/','_target','images/new/diary.gif')
out2.additem('带图片链接3',t2,'def.asp','mainFrame','images/new/webmail.gif')

t2=out2.addtitle('项目4')
out2.additem('打开新窗口',t2,'javascript:void(0);','window.open("abc.html","","width=300,height=200")')

locatefold(out2,"项目4");
out2.show() 
</ script >

           </ td >
         </ tr >
         </ tbody >
         < tbody  style ="display:none;" >  
         < tr >  
           < td  align ="center" > 待用 </ td >
         </ tr >
         </ tbody >  
       </ table >      </ td >
   </ tr >
</ table >