1
<SCRIPT src="tabcontrol.js" type=text/javascript></SCRIPT>
2
3</HEAD>
4<BODY>
5
6<DIV id=tabControl>
7 <DIV id=1 titletext="基本资料">
8 11
9 </DIV>
10 <DIV id=2 titletext="屏幕参数">1</DIV>
11</DIV>
12
<SCRIPT type=text/javascript>
13
var _tabControl=CreateTabControl("tabControl",false);
14 _tabControl.pageClassName="TabPage";
15 _tabControl.init();
16
</SCRIPT>
17</BODY></HTML>
<SCRIPT src="tabcontrol.js" type=text/javascript></SCRIPT>2
3
</HEAD>4
<BODY>5
6
<DIV id=tabControl>7
<DIV id=1 titletext="基本资料">8
119
</DIV>10
<DIV id=2 titletext="屏幕参数">1</DIV>11
</DIV>12
<SCRIPT type=text/javascript>13
var _tabControl=CreateTabControl("tabControl",false);14
_tabControl.pageClassName="TabPage";15
_tabControl.init();16
</SCRIPT>17
</BODY></HTML>js
js1
function TabControl(id)2
{3
var This=this;4
this.id=id;5
this.element=document.getElementById(id);6
this.items=[];7
this.allHidden=false;8
this.titlePanelClassName="";//标题面板 Class Name9
this.titleButtonClassName="";//标题按钮 Class Name10
this.activatedTitleButtonClassName=""//活动页的标题按钮 ClassName11
this.lastPageTitleButtonClassName="";//最后一页标题按钮 Class Name12
this.lastPageActivatedTitleButtonClassName="";//最后一页活动页的标题按钮 Class Name13
this.pageClassName="";//页 Class Name14
this.tabClickHandler=null;15
16
this.show=function(tabPage)17
{18
for(var i=0;i<This.items.length;i++)19
{20
if(This.items[i].id!=tabPage.id)21
{22
This.items[i].hidden();23
}24
else25
{26
This.items[i].show();27
}28
}29
}30
31
//初化化32
this.init=function()33
{34
//读取加载页35
var divs=This.element.getElementsByTagName("DIV");36
var tabPages=[];37
for(var i=0;i<divs.length;i++)38
{39
if(divs[i].parentNode==This.element)40
tabPages[tabPages.length]=divs[i];41
}42
43
for (var i = 0; i<tabPages.length; i++) {44
var tabPage = tabPages[i];45
46
This.items[This.items.length]=tabPage;47
48
if(!tabPage.className)49
{50
tabPage.className=This.pageClassName;51
}52
53
if(!tabPage.titleButtonClassName)54
tabPage.titleButtonClassName=tabPage.titlebuttonclassname;55
if(!tabPage.titleButtonClassName)56
tabPage.titleButtonClassName=tabPage.TitleButtonClassName;57
58
if(!tabPage.activatedTitleButtonClassName)59
tabPage.activatedTitleButtonClassName=tabPage.activatedTitleButtonClassName;60
if(!tabPage.activatedTitleButtonClassName)61
tabPage.activatedTitleButtonClassName=tabPage.ActivatedTitleButtonClassName;62
63
64
if(!tabPage.titleButtonClassName)65
{66
if(i<tabPages.length-1)67
tabPage.titleButtonClassName=This.titleButtonClassName;68
else69
tabPage.titleButtonClassName=This.lastPageTitleButtonClassName;70
}71
72
if(!tabPage.activatedTitleButtonClassName)73
{74
if(i<tabPages.length-1)75
tabPage.activatedTitleButtonClassName=This.activatedTitleButtonClassName;76
else77
tabPage.activatedTitleButtonClassName=This.lastPageActivatedTitleButtonClassName;78
}79
80
tabPage.isShow=function()81
{82
return this.style.display!="none";83
}84
85
tabPage.hidden=function()86
{87
this.style.display="none";88
this.titleButton.className=this.titleButtonClassName;89
if(This.allHidden)90
this.titleButton.innerHTML=this.titletext+"▲";91
92
}93
tabPage.show=function()94
{95
this.style.display="";96
this.titleButton.className=this.activatedTitleButtonClassName;97
if(This.allHidden)98
this.titleButton.innerHTML=this.titletext+"▼"; 99
}100
}101
102
//初始化标题面板;103
var titlePanel=document.createElement("DIV");104
This.element.insertBefore(titlePanel,This.element.firstChild);105
titlePanel.className=This.titlePanelClassName;106
107
//初始化标题按钮108
for(var i=0;i<This.items.length;i++)109
{110
var div=document.createElement("DIV");111
titlePanel.appendChild(div);112
This.items[i].titleButton=div;113
114
div.index=i;115
div.innerHTML=This.items[i].titletext;116
117
div.onclick=function()118
{ 119
if(This.tabClickHandler!=null)120
{121
var bool1=eval(This.tabClickHandler+"(this);");122
if(bool1)return;123
}124
if(This.allHidden&&This.items[this.index].isShow())125
{126
This.items[this.index].hidden();127
}128
else129
{130
This.show(This.items[this.index]);131
132
}133
}134
135
}136
137
var clearDiv=document.createElement("DIV");138
titlePanel.appendChild(clearDiv);139
clearDiv.style.clear="both";140
141
//初始呈现状态142
for(var i=0;i<This.items.length;i++)143
{144
if(This.allHidden||(!This.allHidden&&i>0))145
This.items[i].hidden();146
else if(i==0)147
This.show(This.items[0]);148
}149
}150
}151
152
function CreateTabControl(id,allHidden,style)153
{154
if(!allHidden)allHidden=false;155
if(!style)style="Default";156
157
var tabControl=new TabControl(id);158
tabControl.titlePanelClassName=style+"_TitlePanel";159
tabControl.titleButtonClassName=style+"_TitleButton";160
tabControl.activatedTitleButtonClassName=style+"_ActivatedTitleButton";161
tabControl.lastPageTitleButtonClassName=style+"_LastPageTitleButton";162
tabControl.lastPageActivatedTitleButtonClassName=style+"_LastPageActivatedTitleButton";163
tabControl.pageClassName=style+"_Page";164
tabControl.allHidden=allHidden;165
return tabControl;166
}源码