Sliding Door: I don't understand why.
I will name it JMenuTab, because it is written to serve as my menu.
IE6 and FireFox passed the test.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Link href = "JTabRes1/JMenuTab.css" rel = "stylesheet" type = "text/css"/>
<Style type = "text/css">
<! --
Body {
Margin: 0px;
}
-->
</Style>
</Head>
<Body>
<Table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td width = "200"> </td>
<Td id = "menuBar"> </td>
</Tr>
</Table>
<Div id = "page1"> large and small <br/>
Demographic </div>
<Div id = "page2"> ABCDEFG </div>
<Div id = "page3"> </div>
<Div id = "pageHelp"> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td> JMenuTab help: </td>
</Tr>
<Tr>
<Td> Author: xling Blog: http://xling.blueidea.com 2007/05/23 </td>
</Tr>
<Tr>
<Td> I wrote this program only to solve the pressing problem (Han, although it is urgent, I wrote it for a day )! </Td>
</Tr>
<Tr>
<Td> images used in the program modify existing images on the Internet. Therefore, the appearance is the same as that on some websites. Because all except images are original (no reference to any similar program )! </Td>
</Tr>
<Tr>
<Td> IE6, passed the test in Firefox. </Td>
</Tr>
<Tr>
<Td> call method (note the sequence): </td>
</Tr>
<Tr>
<Td> var menuTab = new JMenuTab (null, null, "menuBar"); <br/>
MenuTab. create (); <br/>
MenuTab. addTab ("Homepage"); <br/>
MenuTab. addTab ("organizational structure", "page1"); <br/>
MenuTab. addTab ("employee information", "page2"); <br/>
MenuTab. addTab ("business knowledge", "page3 ");
<Br/>
MenuTab. addTab ("Help", "pageHelp"); <br/>
MenuTab. setActiveTab (2); </td>
</Tr>
</Table>
</Div>
</Body>
</Html>
<Script language = "javascript" type = "text/javascript">
Function JMenuTab (pWidth, pHeight, pBody ){
Var self = this;
//________________________________________________
Var width = pWidth;
Var height = pHeight;
Var titleHeight = 24;
//________________________________________________
Var oOutline = null;
Var oTitleOutline = null;
Var oPageOutline = null;
Var oTitleArea = null;
Var oPageArea = null;
Var tabArray = new Array ();
Var activedTab = null;
//________________________________________________
Var $ = function (pObjId ){
Return document. getElementById (pObjId );
}
//________________________________________________
Var body = $ (pBody) | document. body;
//________________________________________________
Var htmlObject = function (pTagName ){
Return document. createElement (pTagName );
}
//________________________________________________
Var isRate = function (pRateString ){
If (! IsNaN (pRateString) return false;
If (pRateString. substr (pRateString. length-1, 1 )! = "% ")
Return false;
If (isNaN (pRateString. substring (0, pRateString. length-1 )))
Return false;
Return true;
}
//________________________________________________
Var createOutline = function (){
OOutline = htmlObject ("DIV ");
Body. appendChild (oOutline );
OOutline. className = "oOutline ";
}
//________________________________________________
Var createTitleOutline = function (){
OTitleOutline = htmlObject ("DIV ");
OOutline. appendChild (oTitleOutline );
OTitleOutline. className = "oTitleOutline ";
Var vTable = htmlObject ("TABLE ");
OTitleOutline. appendChild (vTable );
V Table. width = "100% ";
VTable. border = 0;
VTable. cellSpacing = 0;
VTable. cellPadding = 0;
Var vTBody = htmlObject ("TBODY ");
VTable. appendChild (vTBody );
Var vTr1 = htmlObject ("TR ");
VTBody. appendChild (vTr1 );
Var vTdTopLeft = htmlObject ("TD ");
VTr1.appendChild (vTdTopLeft );
VTdTopLeft. height = titleHeight;
VTdTopLeft. className = "oTopLeft ";
OTitleArea = htmlObject ("TD "); /////////////////////////////////
VTr1.appendChild (oTitleArea );
OTitleArea. className = "oTitleArea ";
Var vTdTopRight = htmlObject ("TD ");
VTr1.appendChild (vTdTopRight );
VTdTopRight. className = "oTopRight ";
}
This. setTitleHeight = function (pHeight ){
// Set the height of the title Area
}
//________________________________________________
Var tabBtn_click = function (){
Self. setActiveTab (this. index );
}
Var tabBtn_mouseover = function (){
If (this. className = "oTabBtnActive ")
Return;
This. className = "oTabBtnHover ";
}
Var tabBtn_mouseout = function (){
If (this. className = "oTabBtnActive ")
Return;
This. className = "oTabBtn ";
}
//________________________________________________
Var createTabBtn = function (pLabel, pTabPage ){
Var vTabBtn = 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 );
Var vTabBtnL = 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 ";
}
Var createPageOutline = function (){
OPageOutline = htmlObject ("DIV ");
OOutline. appendChild (oPageOutline );
OPageOutline. className = "oPageOutline ";
Var vTable = htmlObject ("TABLE ");
OPageOutline. appendChild (vTable );
V Table. width = "100% ";
VTable. border = 0;
VTable. cellSpacing = 0;
VTable. cellPadding = 0;
VTable. style. borderCollapse = "collapse ";
VTable. style. tableLayout = "fixed ";
Var vTBody = htmlObject ("TBODY ");
VTable. appendChild (vTBody );
Var vTr1 = htmlObject ("TR ");
VTBody. appendChild (vTr1 );
Var vTdBottomLeft = 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.css Text = "FILTER: progid: DXImageTransform. Microsoft. Wipe (GradientSize = 1.0, wipeStyle = 0, motion = 'forward ');";
OPageArea. height = 10;
Var vTdBottomRight = htmlObject ("TD ");
VTr1.appendChild (vTdBottomRight );
VTdBottomRight. className = "oBottomRight ";
VTdBottomRight. rowSpan = 2;
Var vTr2 = htmlObject ("TR ");
VTBody. appendChild (vTr2 );
Var vtdbottingenter = htmlObject ("TD ");
VTr2.appendChild (vtdbotw.enter );
Vtdbotshortenter. className = "obotshortenter ";
}
//________________________________________________
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 ();
}
}
Var menuTab = new JMenuTab (null, null, "menuBar ");
MenuTab. create ();
MenuTab. addTab ("Homepage ");
MenuTab. addTab ("organizational structure", "page1 ");
MenuTab. addTab ("employee information", "page2 ");
MenuTab. addTab ("business knowledge", "page3 ");
MenuTab. addTab ("ISO system ");
MenuTab. addTab ("office environment ");
MenuTab. addTab ("company News ");
MenuTab. addTab ("public policy ");
MenuTab. addTab ("link Headquarters ");
MenuTab. addTab ("Help", "pageHelp ");
MenuTab. setActiveTab (2 );
</Script>
Download the source code to check the effect.