Prototype library plug-in (1) tab page source code sharing

After a while, the prototype. js library is flexible and small. Using this js library, you have developed some plug-ins for sharing:

[Javascript]
/*************************************** ***********************************
* The file encoding: GBK
* Created by tz @ 2008-3-3 20:26
**************************************** **********************************/
Cs = {};
Cs. flower = {};
Cs. flower. TabSet = Class. create ();
 
If (! Cs. flower. TabSets) {Cs. flower. TabSets = [];}
Object. extend (Cs. flower. TabSet. prototype ,{

HeadElmId :"",
Captions: [],
Tabs: [],
ActiveIdx: 0,

Initialize: function (headElmId ){
If ($ (headElmId + "_ tabs") // compatible with the original js TabSet class
This. headNamesId = headElmId + "_ tabs ";
Else if ($ (headElmId ))
This. headNamesId = headElmId;
Else new Error ("call Error! ");

This. _ id = Cs. flower. TabSets. length;
Cs. flower. TabSets [this. _ id] = this;

This. captions = [];
This. tabs = [];
This. activeIdx = 0;
},

AddTab: function (caption, tab ){
This. captions [this. captions. length] = caption;
This. tabs [this. tabs. length] = tab;
},

Draw: function (){
Var content = new Array;
Content [content. length] = "<div class = \" c_content \ "> <div class = \" c_tab e_clearfix \ "> <ul> ";
For (var I = 0; I <this. tabs. length; I ++ ){
If (I = this. activeIdx ){
Content [content. length] = "<li class = \" current \"";
}
Else {
Content [content. length] = "<li"
This. tabs [I]. style. display = "none ";
}
Content [content. length] = "style = \" cursor: hand \ "onclick = \" Cs. flower. tabSets ["+ this. _ id + "]. switchTo ("+ I +") \ "> ";
// Content [content. length] = "<a href = \" javascript: void (0) \ "onfocus = \" this. blur () \ "> ";
// Add by zhouc2011.8.17 start
Content [content. length] = "<a href = \" javascript: void (0) \ "onfocus = \" Cs. flower. tabSets ["+ this. _ id + "]. switchTo ("+ I +") \ "> ";
// Add by zhouc2011.8.17 end
Content [content. length] = this. captions [I];
Content [content. length] = "</a> </li> ";
}
Content [content. length] = "</ul> </div> ";
$ (This. headNamesId). innerHTML = content. join ("");
},

SwitchTo: function (index ){
If (index = this. activeIdx) return;

$ (This. headNamesId). down ("li. current"). removeClassName ("current ");
This. tabs [this. activeIdx]. style. display = "none ";
If (typeof this. tabs [this. activeIdx]. onBlur! = "Undefined "){
If (typeof this. tabs [this. activeIdx]. onBlur = "string ")
(Function (this. tabs [this. activeIdx]. onBlur). bind (this. tabs [this. activeIdx]) ();
Else
This. tabs [this. activeIdx]. onBlur. bind (this. tabs [this. activeIdx]) ();
}

This. activeIdx = index;
$ (This. headNamesId). down ("ul"). down ("li", this. activeIdx). addClassName ("current ");
This. tabs [this. activeIdx]. style. display = "block ";
If (typeof this. tabs [this. activeIdx]. onFocus! = "Undefined "){
If (typeof this. tabs [this. activeIdx]. onFocus = "string ")
(Function (this. tabs [this. activeIdx]. onFocus). bind (this. tabs [this. activeIdx]) ();
Else
This. tabs [this. activeIdx]. onFocus. bind (this. tabs [this. activeIdx]) ();
}

If (typeof this. _ onTabSelectEvent! = "Undefined "){
If (typeof this. _ onTabSelectEvent = "string ")
(Function (this. _ onTabSelectEvent). bind (this. tabs [this. activeIdx]) ();
Else
This. _ onTabSelectEvent. bind (this. tabs [this. activeIdx]) ();
}
},

OnTabSelect: function (yourEvent ){
This. _ onTabSelectEvent = yourEvent;
},

GetActiveTab: function (){
Return this. tabs [this. activeIdx];
},

GetActiveIdx: function (){
Return this. activeIdx;
},

Hide: function (index ){
$ (This. headNamesId). down ("ul"). down ("li", index). style. display = "none ";
This. tabs [index]. style. display = "none ";
},

Show: function (index ){
$ (This. headNamesId). down ("ul"). down ("li", index). style. display = "block ";
This. tabs [index]. style. display = "block ";
},

Visible: function (index ){
Return this. tabs [index]. style. display! = "None ";
},

Toggle: function (index ){
If (this. visible (index ))
This. hide (index)
Else
This. show (index );
}
});

 

Usage:

Html:

[Html]
<Div class = "c_content">
<Div id = "tabset"> </div>
<Div>
<! -- Basic customer information -->
<Div id = "basecustinfo">
........
........
</Div>
 
<! -- Customer details -->
<Div id = "detailcustinfo">
........
........
</Div>
</Div>

Js:
[Javascript]
Tabset = new Cs. flower. TabSet ("tabset ");
Tabset. addTab ("basic customer information", $ ("basecustinfo "));
Tabset. addTab ("Customer Details", $ ("detailcustinfo "));
Tabset. draw ();

 

The css style:

/* ------------------- Query the external box ---------------------*/
. C_content {line-height: 25px; color: #000; width: 100% ;}
. C_content. mid {margin: auto; text-align: center;
}
. C_content. mid table {
Width: 500px;
Background-color: # f5f5f5;
Border: 1px solid # CCCCCC;
}
. C_content. e_title {line-height: 24px; font-size: 12px; background-color: # F5F5F5; border-bottom: 1px solid; border-color: # ECECEC; border-top: 1px solid # ECECEC ;}
. C_content table {width: 100% ;}
. C_content td {border-bottom: 1px solid; border-color: # EAEAEA; line-height: 20px; padding: 2px; text-align: left ;}
. C_content. info {color: # 0FB0FF}
. C_content. blank {padding: 8px; width: 100% ;}
. C_content. infoLable {font-weight: bold; color: #000000; text-align: right ;}

/* Clear floating */
. E_clearfix: after {content: "."; display: block; height: 0; clear: both; visibility: hidden ;}
. E_clearfix {display: inline-block ;}
. E_clearfix {display: block ;}

/* ------------------- Tab ---------------------*/
. C_tab {
Border-bottom-width: 1px;
Border-bottom-style: solid;
Border-bottom-color: # D71920;
Margin-top: 2px;
}
. C_tab ul {margin: 0px; padding: 0px; list-style: none; margin-left: 8px ;}
. C_tab li {float: left; margin: 0px; padding: 0 0 0 9px; background-image: url (.. /images/tab_r1_c1.gif); background-position: top left; background-repeat: no-repeat; height: 29px; margin-right: 1px; line-height: 29px; white-space: nowrap;
}
. C_tab a {display: block; background-image: url (.. /images/tab_r1_c3.gif); background-position: right top; background-repeat: no-repeat; height: 27px; padding: 0px 12px 0px 6px; color: #555; font-weight: bold; float: left; text-decoration: none ;}
. C_tab a: hover {color: # d71902 ;}
. C_tab. current {background-image: url (../images/tab_active_r1_c1.gif); color: # FFF ;}
. C_tab. current a {background-image: url (../images/tab_active_r1_c3.gif); color: # FFF ;}
C_tab. line {width: 100%; color: # D71920; background: url (.. /images/missionInfo_bg.gif) repeat-x left top; border-bottom: 1px solid # DCDCDC; border-top: 2px solid # D71920; height: 10px ;}
/*-------------------------------------------------*/

Four images involved:

Tab_r1_c1.gif tab_r1_c3.gif:

Tab_active_r1_c1.gif/tab_active_r1_c3.gif:

MissionInfo_bg.gif: