After finishing the preceding command, we copied the XP tab code.
Click to download the source file
The content of the tab.htm file is as follows:
<SCRIPT src ="Common/tabclass. js"> </SCRIPT>
<Link href ="Common/style.css"Rel =" stylesheet "type =" text/CSS ">
<SCRIPT>
VaR tabbox1 = new tabbox ("tab1 ")
Tabbox1.addtab ("p1", "message", 0)
Tabbox1.addtab ("p2", "attachment ")
Tabbox1.addtab ("P3", "about this control ")
</SCRIPT>
<Body bgcolor = "# aeaeae">
<Table border = "0" style = "border-collapse: collapse" bordercolor = "#808080" cellpadding = "0">
<Tr> <TD>
<SCRIPT>
Tabbox1.init ()
</SCRIPT>
</TD>
</Tr>
<Tr width = "300"> <TD bgcolor = "# ffffff" style = "border: 1px #000000 solid; border-top: none" nowrap>
<Table id = P1> <tr> <TD>
<Textarea rows = "6" name = "S1" Cols = "51"> </textarea> </TD> </tr> </table>
<Table id = P2> <tr> <TD> <input type = File> </TD> </tr> </table>
<Table id = P3> <tr> <TD> by <B> <font face = "verdana"> <font color = "# ff0000"> puter </font> jam </font> </B> independent development <br> If you have any comments or suggestions during use, please go to <a href = "http://puterjam.vipx.net/" target = _ blank> puterjam.vipx.net </a> </TD> </tr> </table>
</TD> </tr>
<SCRIPT> tabbox1.inithidetab () </SCRIPT>
</Table>
</Body>
The content of the common/tabclass. js file is as follows:
Function tabbox (tabname, type ){
VaR tabbox = this;
This. tabname = tabname;
This. lasttab = 1;
This. tabarray = new array ()
This. tabpad = NULL;
// ---- Save the ancestor of the tab project ----
This. Item = function (Tabid, caption, DIS ){
This. Tabid = Tabid
This. Caption = Caption
This. Dis = dis
}
// ---- Add a tab project ----
This. addtab = function (Tabid, caption, DIS ){
// Alert (tabbox. tabarray. length)
Tabbox. tabarray [tabbox. tabarray. Length] = new tabbox. Item (Tabid, caption, DIS)
}
// -- Preliminary Test of the program ----
This. init = function (){
// Alert (tabbox. tabname)
If (tabbox. tabarray. Length = 0) {alert ("no project"); return}
Document. Write ("<Div id = '" + tabbox. tabname + "Div'> ")
Tabbox. tabpad = eval ("document. All." + tabbox. tabname + "Div ")
VaR tbboard = Document. createelement ("table ")
Tabbox. tabpad. insertadjacentelement ("beforeend", tbboard );
Tbboard.style.css text = "border-collapse: collapse"
Tbboard. Border = "0"
Tbboard. cellspacing = "0"
Tbboard. cellpadding = "0"
Tbboard. Height = "24"
Tbboard. width = "100%"
Trrow = tbboard. insertrow (0)
Trrow. Height = "3"
VaR TL = 0
Tbcell = trrow. insertcell (TL)
Tbcell. ID = tabbox. tabname + '_ tabbar1'
Tbcell. rowspan = "2"
Tbcell. classname = "tbottom3"
Tbcell. width = "3"
Tbcell. nowrap = true
TL ++
Tbcell = trrow. insertcell (TL)
Tbcell. ID = tabbox. tabname + '_ tabtop1'
Tbcell. nowrap = true
For (I = 1; I <tabbox. tabarray. length; I ++)
{
TL ++
Tbcell = trrow. insertcell (TL)
Tbcell. ID = tabbox. tabname + '_ tabbar' + (I + 1)
Tbcell. rowspan = "2"
Tbcell. classname = "tbottom"
Tbcell. width = "3"
Tbcell. nowrap = true
TL ++
Tbcell = trrow. insertcell (TL)
Tbcell. ID = tabbox. tabname + '_ tabtop' + (I + 1)
Tbcell. nowrap = true
}
TL ++
Tbcell = trrow. insertcell (TL)
Tbcell. ID = tabbox. tabname + '_ tabbar' + (tabbox. tabarray. Length + 1)
Tbcell. rowspan = "2"
Tbcell. classname = "tbottom2"
Tbcell. width = "3"
Tbcell. nowrap = true
TL ++
Tbcell = trrow. insertcell (TL)
Tbcell. rowspan = "2"
Tbcell. width = "100%"
Tbcell. nowrap = true
Tbcell.style.css text = "border-bottom: 1px #000000 solid ;"
// Alert (tbboard. cells. length)
Trrow = tbboard. insertrow (1)
For (I = 0; I <tabbox. tabarray. length; I ++)
{
Tbcell = trrow. insertcell (I)
Tbcell. ID = tabbox. tabname + '_ tabcon' + (I + 1)
Tbcell. classname = "lostfouce"
If (tabbox. tabarray [I]. Dis = 1)
{
Tbcell. innerhtml = "<B>" + tabbox. tabarray [I]. Caption + "& nbsp;" + "</B>"
}
Else
{
Tbcell. innerhtml = tabbox. tabarray [I]. Caption + "& nbsp ;"
}
Tbcell. tabnum = I + 1
Tbcell. nowrap = true
Tbcell. onclick = function ()
{
Tabbox.doc lick (this. tabnum)
}
Tbcell. onmouseover = function ()
{
}
Tbcell. onmouseout = function ()
{
Tabbox. doout (this)
}
}
}
This. inithidetab = function (Num)
{
For (I = 0; I <tabbox. tabarray. length; I ++)
{
Eval (tabbox. tabarray [I]. Tabid). style. Display = "NONE"
}
Tabbox.doc lick (1)
}
This.doc lick = function (Num, Action ){
Lastbar1 = eval (tabbox. tabname + "_ tabbar" + this. lasttab)
Nlasttab = This. lasttab + 1
Lastbar2 = eval (tabbox. tabname + "_ tabbar" + nlasttab)
Tpbar1 = eval (tabbox. tabname + "_ tabbar" + 1)
Tpbar2 = eval (tabbox. tabname + "_ tabbar" + (tabbox. tabarray. Length + 1 ))
Tabtop = eval (tabbox. tabname + "_ tabtop" + this. lasttab)
Tabcon = eval (tabbox. tabname + "_ tabcon" + this. lasttab)
Tabtop. classname = ""
Tabcon. classname = "lostfouce"
// Alert (lastbar2.classname)
Lastbar1.classname = 'tbottom ';
Lastbar2.classname = 'tbottom ';
Tpbar1.classname = 'tbottom3 ';
Tpbar2.classname = 'tbottom2 ';
Eval (tabbox. tabarray [This. lasttab-1]. Tabid). style. Display = "NONE"
Lastbar1 = eval (tabbox. tabname + "_ tabbar" + num)
Nnum = num + 1
Lastbar2 = eval (tabbox. tabname + "_ tabbar" + nnum)
Tabtop = eval (tabbox. tabname + "_ tabtop" + num)
Tabcon = eval (tabbox. tabname + "_ tabcon" + num)
Lastbar1.classname = 'tleft ';
Lastbar2.classname = 'trigger ';
Tabtop. classname = "ttop"
Tabcon. classname = "getfouce"
// Alert (tabbox. tabarray [num-1]. Tabid)
Eval (tabbox. tabarray [num-1]. Tabid). style. Display = "Block"
This. lasttab = num;
}
This. doover = function (OBJ ){
If (obj. classname = "lostfouce ")
{
OBJ. classname = "lostfouce_over"
}
}
This. doout = function (OBJ ){
If (obj. classname = "lostfouce_over ")
{
OBJ. classname = "lostfouce"
}
}
}
The content of the common/style.css file is as follows:
Body
{
Margin: 6pt;
S}
TD
{
Font-family:;
Font-size: 12px;
Color: #000000;
}
. BD
{
Filter: progid: DXImageTransform. Microsoft. Shadow (Direction = 135, color = #999999, strength = 3 );
}
. Tleft
{
Background-image: URL ('../img/tab1.gif ');
}
. Tright
{
Background-image: URL ('../img/tab3.gif ');
}
. Ttop
{
Background-image: URL ('../img/tab2.gif ');
}
. Ttop_over
{
Background-image: URL ('../img/tab8.gif ');
}
. Tbottom
{
Background-image: URL ('../img/tab4.gif ');
}
. Tbottom2
{
Background-image: URL ('../img/tab6.gif ');
}
. Tbottom3
{
Background-image: URL ('../img/tab7.gif ');
Border-bottom: 1px #000000 solid;
}
. Getfouce
{
Cursor: default;
Text-indent: 6px;
Font-size: 12px;
Background-color: # ffffff;
Color: #000000;
Font-family: "";
Font-weight: bold
}
. Lostfouce
{
Text-indent: 6px;
Font-size: 12px;
Background-image: URL ('../img/tab5.gif ');
Border-bottom: 1px #000000 solid;
Cursor: hand;
Color: #555555;
Font-family: "";
Padding-top: 4px
}
. Lostfouce_over
{
Text-indent: 6px;
Font-size: 12px;
Cursor: hand;
Background-image: URL ('../img/tab9.gif ');
Border-bottom: 1px #000000 solid;
}
Http://www.imting.com/puterjam/blogview.asp? Logid = 49 & cateid = 1