Using JSCRIPT/CSS programming technology to simulate and implement Tabview control

Title using JSCRIPT/CSS programming technology to simulate the implementation of Tabview control Zosatapo (original)

Keyword JScript CSS tabview control web Design

Using JSCRIPT/CSS programming technology to simulate and implement Tabview control
[Key word] JScript CSS Tabview Control web Design
[Abstract] This article describes JSCRIPT/CSS programming to simulate the implementation of Tabview controls.
[Author] Zosatapo (CSDN member)
[Email] Dertyang@263.net
Body
Familiar with visual interface programming friends must be familiar with the various controls. There is one control in all controls in database application programming
Often used, this control is the Tabview control, of course, can also be called Property page (PropertyPage). This article will use Jscipt to combine CSS
Technology simulates the implementation of this control in a Web page.
Now let's introduce the main components of the interface. Based on the analysis of the Tabview control, I divided the interface into two parts. One is
The tab section (or the Page Control section) is the part of the page (or the content part). At the same time for this article to describe the Simple, tab control Section
Each tab has only two states (active or inactive), and each tab controls a separate page. At the same time for the flexibility to use the reason,
Page Design This task should be done by the user to complete the design, but to meet certain format requirements.
Now formally explain the implementation of this control and implementation of the process.
//////////////////////////////////////////////////////
Realization Element Part//////
//////////////////////////////////////////////////////
List of main styles used by the factor one control
. tabactive {
Color: #ffff00;
Font-family: song body; font-size:9pt;
Font-weight:bold;
Background-color: #6699CC;
Cursor:default;
border-top:2px outset #99ccff;
border-right:2px outset #336699;
}
Above is the style used when the tab is active
. tabinactive {
Color: #FFFFFF;
Font-family: song body; font-size:9pt;
Font-weight:normal;
Background-color: #003366;
Cursor:hand;
border-right:1px solid #99ccff;
border-bottom:1px solid #99ccff;