一個選項卡的進化史

很久以前因為看別人的js選項卡代碼從而步入javascript的美麗大門，現在我也小小的寫一個小的教程，但願能幫助道對js困惑的朋友。

一、結構

使用合理的HTML結構是javascript UI組件優雅的最重要條件之一，這裡使用dl、dt、dd構建選項卡結構（js羅浮宮討論成果，見司徒正美：jquery tabs插件）

以下為引用的內容：

<dl class="artTabs">
<dt id="tabs"><a href="#tabContent1" class="select">link1</a> <a href="#tabContent2">link2</a> <a href="#tabContent3">link3</a></dt>
<dd id="tabContent1" style="display:block">tabContent1</dd>
<dd id="tabContent2">tabContent2</dd>
<dd id="tabContent3">tabContent3</dd>
</dl>

選項卡按鈕的錨點都指向內容，這樣在腳本與樣式失效的情況下仍然能夠進行基本的跳轉。

二、編寫核心javascript代碼

接下來就是js編寫。使用事件代理機制可以更加高效的處理業務，無需循環遍歷操作去給每個按鈕綁定事件，也能節省內存：

以下為引用的內容：

// 參數：選項卡按鈕外包裹元素, 按鈕選中的樣式, 初始化選中的按鈕索引值(以0開始)
var artTabs = function (bar, className, index) {
var gid = function (id) {return document.getElementById(id)},
buttons = bar.getElementsByTagName('a'),
selectButton = buttons[index],
showContent = gid(selectButton.href.split('#')[1]);

bar.onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;

if (target.nodeName.toLowerCase() === 'a') {
showContent.style.display = 'none';
showContent = gid(target.href.split('#')[1]);
showContent.style.display = 'block';
selectButton.className = '';
selectButton = target;
target.className = className;
return false;
};
};
};

是不是很小巧？以上代碼壓縮後貌似只有351字節：

以下為引用的內容：

var artTabs=function(b,c,i,a){var g=function(x){return document.getElementById(x)},s=b.getElementsByTagName('a'),n=s[i],o=g(n.href.split('#')[1]);b.onclick=function(e){e=e||window.e;a=e.target||e.srcElement;if(a.nodeName.toLowerCase()==='a'){o.style.display='none';o=g(a.href.split('#')[1]);o.style.display='block';n.className='';n=a;a.className=c;return false}}}

調用范例：artTabs(document.getElementById(‘tabs’)， ‘select’， 0);

查看演示：artTabs1.html

三、優化接口

是否發現這個剛出爐的選項卡參數有點麻煩？如果要支持鼠標靠近觸發怎麼辦？或者點擊選項卡的時候要采用ajax加載填充內容要如何處理回調函數？

顯然我們前面的API設計並不能優雅的處理這些需求，我們改用字面量的方式傳入參數，增加一些新接口，如：

以下為引用的內容：

var artTabs = function (bar, config) {
var gid = function (id) {return document.getElementById(id)};

config = config || {};
var bar = typeof bar === 'string' ? gid(bar) : bar,
className = config.className || 'select',
callback = config.callback || function () {},
isMouseover = config.isMouseover,

buttons = bar.getElementsByTagName('a'),
selectButton = buttons[
config.index ||
function () {
var ret = 0;
for (i = 0; i < buttons.length; i++) {
if (buttons[i].className === className) ret = i;
};
return ret;
}()
],
showContent = gid(selectButton.href.split('#')[1]),
fn = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;

if (target.nodeName.toLowerCase() === 'a') {
showContent.style.display = 'none';
showContent = gid(target.href.split('#')[1]);
showContent.style.display = 'block';
selectButton.className = '';
selectButton = target;
target.className = className;
target.focus();
callback(selectButton, showContent);
return false;
};
};

if (isMouseover) bar.onmouseover = fn;
bar.onclick = fn;// click事件至少能保證手持設備可以使用
};

調用范例：artTabs(‘tabs’);

查看演示：artTabs2.html

四、擴展

原生代碼執行效率往往會比框架高，當然我們還是可以很簡單寫幾行代碼為jQuery獻身，成為其插件：

以下為引用的內容：

jQuery.fn.artTabs = function (config) {
return this.each(function () {
artTabs(this, config);
});
};