快捷導(dǎo)航

YUI的Tab切換實(shí)現(xiàn)代碼

更新時(shí)間：2010年04月11日 20:35:51 作者：

YUI自帶了一個(gè)TabView，雖然很簡潔也很強(qiáng)大，但是常常不是想要的那種。

Tab切換應(yīng)該不依賴于HTML結(jié)構(gòu)，能給設(shè)計(jì)人員和前端開發(fā)最大的靈活性。原理：一個(gè)tab對(duì)象分為控制部分(trigger)，內(nèi)容部分(sheet)。當(dāng)trigger被觸發(fā)時(shí)，顯示對(duì)應(yīng)的sheet。

以前大樹寫過一個(gè)TabControl的代碼，經(jīng)過兩年的使用依舊很考譜，說明當(dāng)初這個(gè)思路還是比較符合實(shí)際需求的。我改成了基于YUI的版本，可能看起來更清晰一些。先訪問測(cè)試頁面查看效果，完整javascript代碼在這里。

注意：改成實(shí)際代碼時(shí)，請(qǐng)將Tab類放在某個(gè)命名空間下，不要直接暴露在全局空間中。

1：使用
以下是常用的html結(jié)構(gòu)，但不限于此。

復(fù)制代碼代碼如下:

 
<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> 

對(duì)應(yīng)的javascript代碼如下，四種初始化方法都是可以的。

復(fù)制代碼代碼如下:

 
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：擴(kuò)展
已經(jīng)實(shí)現(xiàn)自動(dòng)切換功能(默認(rèn)關(guān)閉)，另外可以通過onShow自定義事件擴(kuò)展，也可以在原代碼基礎(chǔ)上添加更多的自定義事件。