YUI implementation code for Tab switching

Tab switching should not rely on the HTML structure, which can give designers and front-end developers the maximum flexibility. Principle: A tab object is divided into trigger and sheet ). When a trigger is triggered, the corresponding sheet is displayed.

In the past, the big tree wrote a TabControl code. After two years of use, the TabControl code is still very well tested, indicating that this idea was quite in line with actual needs. I changed the YUI-based version, which may seem clearer. Visit the test page to view the effect. The complete javascript code is here.

Note: when changing the code to the actual one, place the Tab class in a namespace instead of directly exposing it to the global space.

1: Use
The following are common html structures, but are not limited.
Copy codeThe Code is 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. The four initialization methods are acceptable.

Copy codeThe Code is as follows:
Var tab = new Tab ($ D. get ('T '). getElementsByTagName ('lil'), $ 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, ){...});
Tab. init ();


2: Expansion
The automatic switch function has been implemented (disabled by default). In addition, you can use the onShow Custom Event extension, or add more custom events based on the original code.