滑动门：我不理解为什么这样叫。
我就命名为：JMenuTab吧，因为写它是为了当我的菜单。
IE6,FireFox下测试通过。
复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<linkhref="JTabRes1/JMenuTab.css"rel="stylesheet"type="text/css"/>
<styletype="text/css">
<>
</style>
</head>
<body>
<tablewidth="100%"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdwidth="200"></td>
<tdid="menuBar"></td>
</tr>
</table>
<divid="page1">大大小小多多少少<br/>
人口手足</div>
<divid="page2">ABCDEFG</div>
<divid="page3"><imgsrc="loading.gif"/></div>
<divid="pageHelp"><tablewidth="100%"border="0"cellspacing="0"cellpadding="0">
<tr>
<td>JMenuTab帮助：</td>
</tr>
<tr>
<td>Author:xlingBlog:http://xling.blueidea.com2007/05/23</td>
</tr>
<tr>
<td>写这个程序只是为了解决燃眉之急（汉，虽然是急，我还是写了一天）！</td>
</tr>
<tr>
<td>程序中用到图片是修改了网上现有图片，所以，外表和某些网站上的一样，请不要见怪。因为除了图片，全是原创(不曾参考任何类似程序)！</td>
</tr>
<tr>
<td>IE6,Firefox下测试通过。</td>
</tr>
<tr>
<td>调用方法(注意顺序)：</td>
</tr>
<tr>
<td>varmenuTab=newJMenuTab(null,null,"menuBar");<br/>
menuTab.create();<br/>
menuTab.addTab("首页");<br/>
menuTab.addTab("组织架构","page1");<br/>
menuTab.addTab("员工信息","page2");<br/>
menuTab.addTab("业务知识","page3");
<br/>
menuTab.addTab("Help","pageHelp");<br/>
menuTab.setActiveTab(2);</td>
</tr>
</table>
</div>
</body>
</html>
<scriptlanguage="javascript"type="text/javascript">
functionJMenuTab(pWidth,pHeight,pBody){
varself=this;
//________________________________________________
varwidth=pWidth;
varheight=pHeight;
vartitleHeight=24;
//________________________________________________
varoOutline=null;
varoTitleOutline=null;
varoPageOutline=null;
varoTitleArea=null;
varoPageArea=null;
vartabArray=newArray();
varactivedTab=null;
//________________________________________________
var$=function(pObjId){
returndocument.getElementById(pObjId);
}
//________________________________________________
varbody=$(pBody)||document.body;
//________________________________________________
varhtmlObject=function(pTagName){
returndocument.createElement(pTagName);
}
//________________________________________________
varisRate=function(pRateString){
if(!isNaN(pRateString))returnfalse;
if(pRateString.substr(pRateString.length-1,1)!="%")
returnfalse;
if(isNaN(pRateString.substring(0,pRateString.length-1)))
returnfalse;
returntrue;
}
//________________________________________________
varcreateOutline=function(){
oOutline=htmlObject("DIV");
body.appendChild(oOutline);
oOutline.className="oOutline";
}
//________________________________________________
varcreateTitleOutline=function(){
oTitleOutline=htmlObject("DIV");
oOutline.appendChild(oTitleOutline);
oTitleOutline.className="oTitleOutline";
varvTable=htmlObject("TABLE");
oTitleOutline.appendChild(vTable);
vTable.width="100%";
vTable.border=0;
vTable.cellSpacing=0;
vTable.cellPadding=0;
varvTBody=htmlObject("TBODY");
vTable.appendChild(vTBody);
varvTr1=htmlObject("TR");
vTBody.appendChild(vTr1);
varvTdTopLeft=htmlObject("TD");
vTr1.appendChild(vTdTopLeft);
vTdTopLeft.height=titleHeight;
vTdTopLeft.className="oTopLeft";
oTitleArea=htmlObject("TD");/////////////////////////////////
vTr1.appendChild(oTitleArea);
oTitleArea.className="oTitleArea";
varvTdTopRight=htmlObject("TD");
vTr1.appendChild(vTdTopRight);
vTdTopRight.className="oTopRight";
}
this.setTitleHeight=function(pHeight){
//设置标题区域的高度
}
//________________________________________________
vartabBtn_click=function(){
self.setActiveTab(this.index);
}
vartabBtn_mouseover=function(){
if(this.className=="oTabBtnActive")
return;
this.className="oTabBtnHover";
}
vartabBtn_mouseout=function(){
if(this.className=="oTabBtnActive")
return;
this.className="oTabBtn";
}
//________________________________________________
varcreateTabBtn=function(pLabel,pTabPage){
varvTabBtn=htmlObject("DIV");
oTitleArea.appendChild(vTabBtn);
vTabBtn.className="oTabBtn";
vTabBtn.index=tabArray.length;
vTabBtn.tabPage=pTabPage;
vTabBtn.onclick=tabBtn_click;
vTabBtn.onmouseover=tabBtn_mouseover;
vTabBtn.onmouseout=tabBtn_mouseout;
tabArray.push(vTabBtn);
varvTabBtnL=htmlObject("DIV");
vTabBtn.appendChild(vTabBtnL);
vTabBtnL.className="oTabBtnLeft";
vTabBtnC=htmlObject("DIV");
vTabBtn.appendChild(vTabBtnC);
vTabBtnC.className="oTabBtnCenter";
vTabBtnC.innerHTML=pLabel;
vTabBtnR=htmlObject("DIV");
vTabBtn.appendChild(vTabBtnR);
vTabBtnR.className="oTabBtnRight";
}
varcreatePageOutline=function(){
oPageOutline=htmlObject("DIV");
oOutline.appendChild(oPageOutline);
oPageOutline.className="oPageOutline";
varvTable=htmlObject("TABLE");
oPageOutline.appendChild(vTable);
vTable.width="100%";
vTable.border=0;
vTable.cellSpacing=0;
vTable.cellPadding=0;
vTable.style.borderCollapse="collapse";
vTable.style.tableLayout="fixed";
varvTBody=htmlObject("TBODY");
vTable.appendChild(vTBody);
varvTr1=htmlObject("TR");
vTBody.appendChild(vTr1);
varvTdBottomLeft=htmlObject("TD");
vTr1.appendChild(vTdBottomLeft);
vTdBottomLeft.className="oBottomLeft";
vTdBottomLeft.rowSpan=2;
oPageArea=htmlObject("TD");///////////////////////////////////////
vTr1.appendChild(oPageArea);
oPageArea.className="oPageArea";
if(oPageArea.filters)
oPageArea.style.cssText="FILTER:progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,motion='forward');";
oPageArea.height=10;
varvTdBottomRight=htmlObject("TD");
vTr1.appendChild(vTdBottomRight);
vTdBottomRight.className="oBottomRight";
vTdBottomRight.rowSpan=2;
varvTr2=htmlObject("TR");
vTBody.appendChild(vTr2);
varvTdBottomCenter=htmlObject("TD");
vTr2.appendChild(vTdBottomCenter);
vTdBottomCenter.className="oBottomCenter";
}
//________________________________________________
this.addTab=function(pLabel,pPageBodyId){
createTabBtn(pLabel,pPageBodyId);
if($(pPageBodyId)){
oPageArea.appendChild($(pPageBodyId));
$(pPageBodyId).style.display="none";
}
}
//________________________________________________
this.setActiveTab=function(pIndex){
if(oPageArea.filters)
oPageArea.filters[0].apply();
if(activedTab!=null){
activedTab.className="oTabBtn";
if($(activedTab.tabPage))
$(activedTab.tabPage).style.display="none";
}
activedTab=tabArray[pIndex];
activedTab.className="oTabBtnActive";
if($(activedTab.tabPage))
$(activedTab.tabPage).style.display="";
if(oPageArea.filters)
oPageArea.filters[0].play(duration=1);
};
//________________________________________________
this.create=function(){
createOutline();
createTitleOutline();
createPageOutline();
}
}
varmenuTab=newJMenuTab(null,null,"menuBar");
menuTab.create();
menuTab.addTab("首页");
menuTab.addTab("组织架构","page1");
menuTab.addTab("员工信息","page2");
menuTab.addTab("业务知识","page3");
menuTab.addTab("ISO系统");
menuTab.addTab("办公环境");
menuTab.addTab("公司新闻");
menuTab.addTab("公共政策");
menuTab.addTab("链接总部");
menuTab.addTab("Help","pageHelp");
menuTab.setActiveTab(2);
</script>
请下载源码察看效果。