YUI的Tab切換實現代碼_YUI.Ext相關

Tab切換應該不依賴於HTML結構，能給設計人員和前端開發最大的靈活性。原理：一個tab對象分為控制部分(trigger)，內容部分(sheet)。當trigger被觸發時，顯示對應的sheet。

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

注意：改成實際代碼時，請將Tab類放在某個命名空間下，不要直接暴露在全域空間中。

1：使用
以下是常用的html結構，但不限於此。

複製代碼 代碼如下:

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

對應的javascript代碼如下，四種初始化方法都是可以的。

複製代碼 代碼如下:

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：擴充
已經實現自動切換功能(預設關閉)，另外可以通過onShow自訂事件擴充，也可以在原代碼基礎上添加更多的自訂事件。