The tab switch should be independent of the HTML structure, giving designers and front-end developers the greatest flexibility. Principle: A Tab object is divided into the control section (trigger), the Content section (sheet). When the trigger is triggered, the corresponding sheet is displayed.
Before the tree wrote a TabControl code, after two years of use is still very test spectrum, indicating that the original idea is still more in line with the actual needs. I changed to the Yui based version, may look more clear. First access to the test page to view the effect, complete JavaScript code here.
Note: When you change to the actual code, put the tab class under a namespace and do not expose it directly to the global space.
1: Use
The following are common HTML constructs, but not limited to this.
Copy Code code as follows:
<ul id= "T" >
<li id= "T1" >t1</li>
<li id= "T2" >t2</li>
<li id= "T3" >t3</li>
</ul>
<div id= "S" >
<div id= "S1" >s1</div>
<div id= "S2" >s2</div>
<div id= "S3" >s3</div>
</div>
The corresponding JavaScript code is as follows, and four initialization methods are available.
Copy Code code as follows:
var tab = new Tab ($D. Get (' t '), getElementsByTagName (' Li '), $D. Get (' s ') getElementsByTagName (' div ');//1
var tab = new Tab ([' T1 ', ' T2 ', ' T3 '],[' s1 ', ' s2 ', ' S3 ']);//2
var tab = new Tab ([' T1 ', ' T2 ', ' T3 '],[' s1 ', ' s2 ', ' S3 '],{triggerevent: ' MouseOver ', slideenabled:true});//3
var tab = new Tab ();//4
Tab.add (' T1 ', ' s1 ');
Tab.add (' T2 ', ' s2 ');
Tab.add (' T3 ', ' S3 ');
tab.config[' triggerevent '] = ' mouseover ';
tab.config[' slideenabled '] = true;
Tab.onShow.subscribe (function (t, a) {...});
Tab.init ();
2: Expansion
Automatic switching is implemented (by default), and additional custom events can be added to the original code by OnShow custom event extensions.
