Use JScript/CSS programming technology to simulate tabview controls

Use JScript/CSS programming technology to simulate tabview controls
[Key Word] JScript CSS tabview control Webpage Design
[Abstract] This article introduces JScript/CSS programming to simulate and implement the tabview control.

[Author] zosatapo (csdn Member)
[Email] dertyang@263.net

[Body]
Anyone familiar with visual interface programming must be familiar with various controls. One control in all controls is used in database application programming.
This control is often used. It can also be called a property page ). This article will use jscipt in combination with CSS
The technology simulates this control on the webpage.
This section describes the main components of the interface. Based on the analysis and understanding of the tabview control, I divide the interface into two parts. First
Tab (or page control). One is page (or content ). For the sake of simplicity, Tab Control
Each tab has only two States (active or inactive), and each tab controls a separate page. For the sake of flexibility,
The page design task should be completed by the user, but must meet certain format requirements.
Now, we officially begin to explain the implementation elements and processes of this control.
//////////////////////////////////////// //////////////
//// // Implementation element //////
//////////////////////////////////////// //////////////
[Element 1] main style list used by the Control
. Tabactive {
Color: # FFFF00;
Font-family:; font-size: 9pt;
Font-weight: bold;
Background-color: # 6699cc;
Cursor: default;
Border-top: 2px outset #99 CCFF;
Border-Right: 2px outset #336699;
}
// The style used when the tab is activated
. Tabinactive {
Color: # ffffff;
Font-family:; font-size: 9pt;
Font-weight: normal;
Background-color: #003366;
Cursor: hand;
Border-Right: 1px solid #99 CCFF;
Border-bottom: 1px solid #99 CCFF;
}
// The style used when the tab is inactive
. Pagent {
Background-color: # f5f0e6;
Width: 100%; Height: 508px;
Padding-left: 0px; padding-top: 2px;
}
// The style used on the tab-controlled page
[Element 2] dynamically generate tab Control Code
This part of the function is mainly composed of multiple tab control instruction arrays and a function.

The array format is as follows:
// Tab part Tabid the page pageid corresponding to the initial running class tab part
VaR folder1 = new array ("tab1", "tabactive", "page1 ");

// Note the following:ProgramDefine the initial running class type of the tab part as a tabactive project and select
// The default selection item. Its corresponding page is also used as the default display page.

* ******************* Important tips ****************** ********

// But for simplicity, it is actually logical. Only one control in all definitions should be initialized.
// The Running class type is defined as tabactive.

// The following function generates the tabview control part based on the array.
Function createfolder ()
{
...
};
[For more information, seeSource code]

[Element 3] functional simulation of the tabview Control
As mentioned above, this article tries to make the code as simple as possible and make the implementation easier to understand.
Therefore, this simulated control does not implement Mouseover and mouseout time response, and I have not used
Updated HTC component technology. My next articleArticleWrite an example of a component.

In this article, after the tab control section of the tabview control is generated, it simply provides a click event processor for it.
In this way, you can simulate the page feed function of the real tabview control. Page users follow the rules below
You need to add the page content yourself. I will provide a detailed description of this in the implementation process section below.

//////////////////////////////////////// //////////////
//// // Implementation process //////
//////////////////////////////////////// //////////////
[Step 1] Create a control array definition for the tabview Control

VaR folder1 = new array ("tab1", "tabactive", "page1 ");

VaR folder2 = new array ("tab2", "tabinactive", "page2 ");

...

[Step 2] control of dynamically generated tabview controls

Call the createfolder () function to read the control section of the tabview control generated by the array definition according to the format.

[Step 3] users can generate their own pages (either static or dynamic. This example is static)

// The following format is required for the page
<Div id = "case detail" class = "pagent" style = "display: none">
// Two of the page formats are required. The ID must be []
// You can add the content you need.
</Div>

[Step 4] install the event processor for each tab in the control section of the tabview Control

Tab. attachevent ("onclick", new function ("tab_onclick (this )"));

Here, the work of simulating a simple tabview control using JScript/CSS is all over.

Now you can browse your own controls in IE. It feels good.

//////////////////////////////////////// //////////////
//// // Conclusion //////
//////////////////////////////////////// //////////////
This article only simulates the tabview control. To implement a tabview under the Web, consider
Many other factors are not as good as the tabs provided above to control events such as onmouseover and onmouseout.
. At the same time, with the development of XML technology, we can make better use of databases and servers.
The tabview control page is dynamically generated by the software. If we use the HTC component technology
You can also write code with higher reusability.

//////////////////////////////////////// //////////////
//// // Use all source code in this article //////
//////////////////////////////////////// //////////////
For the sake of this, I put all the files in one document. You can
Separate JavaScript, JScript, CSS, and htm files.

<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> new document </title>
<Meta name = "generator" content = "editplus">
<Meta name = "author" content = "">
<Meta name = "keywords" content = "">
<Meta name = "Description" content = "">
<Style type = "text/CSS">

. Titlebar {font-family:; font-size: 9pt; color: #003300; Background-color: #99cc99}
Body {font-family:; font-size: 9pt; Background-color: # f5f0e6 ;}

. Tabactive {
Color: # FFFF00;
Font-family:; font-size: 9pt;
Font-weight: bold;
Background-color: # 6699cc;
Cursor: default;

Border-top: 2px outset #99 CCFF;
Border-Right: 2px outset #336699;
}
. Tabinactive {
Color: # ffffff;
Font-family:; font-size: 9pt;
Font-weight: normal;
Background-color: #003366;
Cursor: hand;

Border-Right: 1px solid #99 CCFF;
Border-bottom: 1px solid #99 CCFF;
}
. Tabinactiveover {
Color: # ffffff;
Font-family:; font-size: 9pt;
Font-weight: normal;
Background-color: #003366;
Cursor: hand;

Border-Right: 1px solid #99 CCFF;
Border-bottom: 1px solid #99 CCFF;
}
. Tabinactiveempty {
Color: # ffffff;
Font-family:; font-size: 9pt;
Font-weight: normal;

Cursor: hand;

Border-Right: 1px solid #99 CCFF;
Border-bottom: 1px solid #99 CCFF;
}

. Tabbarnt {background-color: # eeeeee;

Width: 96%; Height: 21px ;}
. Pagent {
Background-color: # f5f0e6;

Width: 100%; Height: 508px;
Padding-left: 0px; padding-top: 2px;
}

</Style>
<Script language = "JavaScript">
<! --
// Auxiliary functions
Function ltrim (STR)
{
Return Str. Replace (/^ \ s */,"");
}

Function rtrim (STR)
{
Return Str. Replace (/\ s * $ /,"");
}

Function trim (STR)
{
VaR strtmp;
Strtmp = ltrim (STR );
Strtmp = rtrim (strtmp );
Return strtmp;
}

// -->
</SCRIPT>

<Script language = "JavaScript">
<! --
// Define an array
VaR folder1 = new array ("tab1", "tabactive", "page1 ");
VaR folder2 = new array ("tab2", "tabinactive", "page2 ");
VaR folder3 = new array ("tab3", "tabinactive", "page3 ");
// -->
</SCRIPT>

<Script language = "JavaScript">
<! --
// Obtain the number of elements in the tab Control Section.
Function gettabpartcount ()
{
VaR COUNT = 1;

While (eval ("window. folder" + count) {count ++ ;}

Count --;
Return count;
}
Function createfolder ()
{

Document. Write ("<Table bgcolor = '# 6699cc' border = 0 cellpadding = 0" +
"Cellspacing = 0 id = 'tabbar' style = 'background-color: transparent; 'width = 100%> ");
Document. Write ("<tr Height = 24 valign = 'center'> ");

Tabnum = gettabpartcount ();
I = 1;
While (I <tabnum + 1 ){
Folder = eval ("folder" + I );
Document. Write ("<TD class = '" + folder [1] + "'id ='" + folder [0] +
"'Align = 'center'>" + folder [2] + "</TD> ");
I ++;
}
Totalnum = tabnum + 1;
Document. Write ("<TD class = 'tabinactive' width = 100%> </TD> ");
Document. write ("</tr> <tr Height = 4> <TD colspan = '" + totalnum + "'valign = Top bgcolor =' # 6699cc '> </TD> </ tr> ");
Document. write ("<tr> <TD bgcolor = '# f5f0e6' colspan =" + totalnum + "Height = 16 valign = top> </TD> </tr> </table> ");

}

Function gettabpartarray ()
{
VaR objreturn = new array ();
VaR OBJ = NULL;
VaR COUNT = gettabpartcount ();
VaR I = 1;
While (I <= count)
{
OBJ = eval ("window. folder" + I );
OBJ = Document. All (OBJ [0]);
If (OBJ! = NULL)
{
Objreturn [objreturn. Length] = OBJ;
}
I ++;
}

Return objreturn;
}

Function getcurrentactivetab ()
{
VaR ttabarray = gettabpartarray ();
For (VAR I = 0; I <ttabarray. length; I ++)
{
If (ttabarray [I]. classname = "tabactive ")
{
Return ttabarray [I];
}
}

}
Function getcurrentactivepage ()
{
VaR OBJ = getcurrentactivetab ();
VaR pageid = obj. innertext;
VaR page = getpagebyid (pageid );
Return page;
}
Function getpagebyid (pageid)
{
VaR OBJ = Document. All (pageid );

Return OBJ;
}

Function gettabbyid (Tabid)
{
VaR OBJ = Document. All (Tabid );
Return OBJ;
}

Function tab_onclick ()
{
VaR curtab = getcurrentactivetab ();
VaR curpage = getcurrentactivepage ();

VaR objtab = gettdfrompoint ();
VaR pageid = NULL;
VaR objpage = NULL;
If (objtab! = NULL)
{
Pageid = objtab. innertext;
// Alert (pageid );
Objpage = getpagebyid (pageid );
If (curtab. ID = objtab. ID)
{
Return;
}
Else
{
Objpage. style. Display = "Block ";
Curpage. style. Display = "NONE ";

Objtab. classname = "tabactive ";
// Alert (objtab. classname );
Curtab. classname = "tabinactive ";

}
}
}

Function gettdfrompoint ()
{
VaR OBJ = event. srcelement;
If (obj. tagname = "TD") & (obj. classname = "tabinactive") | (obj. classname = "tabactive ")))
{
Return OBJ;
}
Else
{
Return NULL;
}
}

Function fattachevent ()
{
VaR objtabarray = gettabpartarray ();
For (I = 0; I <objtabarray. length; I ++)
{
VaR Tabid = objtabarray [I]. ID;
// Alert (Tabid );
Objtabarray [I]. attachevent ("onclick", new function ("tab_onclick ()"));
}
}
// -->
</SCRIPT>
<Script language = "JavaScript">
<! --
Createfolder ();
Fattachevent ();
// -->
</SCRIPT>
</Head>

<Body bgcolor = "# ffffff">
<Input type = "button" value = "test" onclick = "tab_onclick (document. All ('tab2')">
<Div id = "page1" class = "pagent" style = "display: Block">
<P align = "center"> <font size = "4"> This test page: Page One </font> </P>
<Table align = "center" border = "1">
<Tr>
<TD> name </TD>
<TD> age </TD>
</Tr>
<Tr>
<TD> zosatapo </TD>
<TD> 23 </TD>
</Tr>
</Table>
</Div>

<Div id = "page2" class = "pagent" style = "display: none">
<P align = "center"> <font size = "4"> This test page: page two </font> </P>
<Table align = "center" border = "1">
<Tr>
<TD> name </TD>
<TD> age </TD>
</Tr>
<Tr>
<TD> zosatapo </TD>
<TD> 23 </TD>
</Tr>
</Table>
</Div>

This test page: page three

name	age
zosatapo	23