Sliding door: I don't understand why it is called.
I was named: Jmenutab, because it was written to be my menu.
Ie6,firefox the test pass.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<body>
<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<TD width= > </td>
<TD id= "MenuBar" ></td>
</tr>
</table>
<div id= "Page1" > Big and small more or less <br/>
Human sibling </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> write this program just to solve the immediate problem (Han, although it is urgent, I still wrote a day)! </td>
</tr>
<tr>
<td> procedures used in the picture is to modify the existing online pictures, so the appearance and some of the same site, please do not take it amiss. Because in addition to the picture, are all original (no reference to any similar procedures)! </td>
</tr>
<tr>
<td>ie6,firefox the test pass. </td>
</tr>
<tr>
<td> Calling method (note order):</td>
</tr>
<tr>
<td>var menutab = new Jmenutab (null,null, "MenuBar"); <br/>
Menutab.create (); <br/>
Menutab.addtab ("home page"); <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>
<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);
Vtable.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 banner 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);
Vtable.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.cssText = "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 vtdbottomcenter = 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 ();
}
}
var menutab = new Jmenutab (null,null, "MenuBar");
Menutab.create ();
Menutab.addtab ("home page");
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>
Please download the source view effect.
