YUI's Tab switching implementation code_YUI.Ext related

Tab switching should not depend on HTML structure, giving designers and front-end developers maximum flexibility. Principle: A tab object is divided into a control part (trigger) and a content part (sheet). When the trigger is triggered, the corresponding sheet is displayed.

Dashu wrote a TabControl code before. After two years of use, it is still very testable, which shows that this idea was relatively in line with actual needs. I changed it to a YUI-based version, which may look clearer. First visit the test page to see the effect. The complete javascript code is here.

Note: When changing to actual code, please put the Tab class under a certain namespace and do not expose it directly to the global space.

1: Use
The following are commonly used html structures, but are not limited to this.

Copy code The code is as follows:

• t1


• t2


• t3
  

s1

s2

s3

The corresponding javascript code is as follows, All four initialization methods are possible.

Copy code The code is 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( ; Define events.