快捷導航

一步一步制作jquery插件Tabs實現(xiàn)過程

更新時間：2010年07月06日 23:24:28 作者：

自制一個簡潔的tabs插件還是有必要的在設(shè)計之前，先整理好思路，實現(xiàn)tabs，自動輪換，ajax等主要功能，然后是dom的排列形式，這里采用傳統(tǒng)的

tabs是現(xiàn)在網(wǎng)頁應用最廣的一種效果，jquery插件和非jquery插件也有不少，有一些朋友問我怎么用jquery.ui.tabs的ajax怎么只請求服務(wù)器一次原來我想其實很簡單，看看官方的API就了解，不過我在回復這些朋友之前，用firebug查看了官方的ui.tabs發(fā)現(xiàn)，聲明了ajax緩存，每點一個tabs時，仍然會有服務(wù)器請求這應該是服務(wù)器緩存，而不是實際上我們要求的只ajax一次，不再請求服務(wù)器了接下來我找了一下其它的tabs插件，基本上沒有符合要求的，不是太龐大就是太簡單，太過龐大的話不如用ui.tabs，文檔和代碼規(guī)范上都是可靠的因此，自制一個簡潔的tabs插件還是有必要的在設(shè)計之前，先整理好思路，實現(xiàn)tabs，自動輪換，ajax等主要功能，然后是dom的排列形式，這里采用傳統(tǒng)的
<div id="tabs">
　　<ul>
　　　　<li><a href="#tabs1">tabs1</a></li>
　　　　<li><a href="#tabs2" rel="ajax.htm">tabs2</a></li>
　　</ul>
　　<div id="tabs1">Hello World!</div>
　　<div id="tabs2"></div>
</div>
一個li對應一個div的方式，當ajax時，添加一個a的rel屬性，并將內(nèi)容寫入對應的div中，再去掉rel屬性，這樣就只請求服務(wù)器一次，接下來都是div已經(jīng)寫入的內(nèi)容了
我這里沒有使用cookie，可以結(jié)合jquery.cookie插件，這樣即使用戶關(guān)閉網(wǎng)頁下次再打開，也不用請求服務(wù)器了
一，首先寫個jquery插件的閉包，園子里這兩天有個朋友寫了javascript的閉包概念，挺好的，有興趣的朋友去看看

復制代碼代碼如下:

 
(function ($) { 
//code here 
})(jQuery); 

二，插件命名，這里命名為aTabs，這樣綁定的時候可以用$(...).aTabs()，本人英文名Allen，所以用a字頭命名了~

復制代碼代碼如下:

 
$.fn.aTabs = function (options) { 
//api 
//main function 
} 

三，把想好的功能寫成API，供外部修改

復制代碼代碼如下:

 
$.fn.aTabs.defaults = { 
firstOn: 0, 
className: 'selected', 
eventName: 'all', //click,mouserover,all 
loadName: '加載中...', //ajax等待字符串 
fadeIn: 'normal', 
autoFade: false, 
autoFadeTime: 3 
}; 
var opts = $.extend({}, $.fn.aTabs.defaults, options); //這里可以將外部輸入的代替掉默認的值，$.extend作用詳見 <A >http://api.jquery.com/jQuery.extend/</A>，看不懂英文的直接看其中的例子就行 

四，編寫主體功能，說明在代碼中看注釋

復制代碼代碼如下:

 
return this.each(function () { //這里為每個綁定dom插件 
var target = $(this); 
var div = target.children().not("ul,span"); //所有的tabs顯示體div 
var tabs = target.find('ul:eq(0) li'); //所有的tabs頭部索引 
function Tabs() { 
if ($(this).hasClass(opts.className)) { 
return false; 
} 
tabsShow(div, $(this)); 
return false; 
} 
function tabsShow(div, li, index) { 
div.stop(true, true).hide(); 
//自動輪換用 
if (typeof (index) == "number") { 
if (li.find("a").attr("rel")) ajax(div, li); 
$(div[index]).stop(true,true).fadeIn(opts.fadeIn); 
tabs.stop(true, true).removeClass(opts.className); 
$(tabs[index]).stop(true, true).addClass(opts.className); 
} 
//非自動輪換 
else { 
var tabBody = div.filter(li.find("a").attr("href")); 
if (li.find("a").attr("rel")) ajax(div, li); 
tabBody.stop(true,true).fadeIn(opts.fadeIn); 
tabs.stop(true, true).removeClass(opts.className); 
li.stop(true, true).addClass(opts.className); 
} 
} 
function ajax(div, li) {　　//這里是關(guān)鍵ajax，通過操作rel的方式實現(xiàn)只請求服務(wù)器一次 
var href = li.find("a").attr("href"); 
var rel = li.find("a").attr("rel"); //ajax請求url 
var i = div.filter(href); //當前div 
if (rel) { //如果ajax請求url不為空，只ajax一次 
i.html(opts.loadName); 
$.ajax({ 
url: rel, 
cache: false, 
success: function (html) { 
i.html(html); 
}, 
error: function () { 
i.html('加載錯誤，請重試！'); 
} 
}); 
li.find("a").removeAttr("rel"); //只ajax一次 
} 
} 
if (opts.autoFade) { 
var index = opts.firstOn + 1; 
setInterval(function () { 
if (index >= div.length) { 
index = 0; 
} 
tabsShow(div, $(this), index++); 
}, opts.autoFadeTime * 1000); 
} 
tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //綁定事件 
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自動觸發(fā)事件 
}); 

最后，將以上整合，tabs插件就誕生了，下面是全部源碼：

復制代碼代碼如下:

 
/* 
* 作者：黑曜石 
*/ 
(function ($) { 
$.fn.aTabs = function (options) { 
$.fn.aTabs.defaults = { 
firstOn: 0, 
className: 'selected', 
eventName: 'all', //click,mouserover,all 
loadName: '加載中...', //ajax等待字符串 
fadeIn: 'normal', 
autoFade: false, 
autoFadeTime: 3 
}; 
var opts = $.extend({}, $.fn.aTabs.defaults, options); 
return this.each(function () { 
var target = $(this); 
var div = target.children().not("ul,span"); //所有的tabs顯示體div 
var tabs = target.find('ul:eq(0) li'); //所有的tabs頭部索引 
function Tabs() { 
if ($(this).hasClass(opts.className)) { 
return false; 
} 
tabsShow(div, $(this)); 
return false; 
} 
function tabsShow(div, li, index) { 
div.stop(true, true).hide(); 
//自動輪換用 
if (typeof (index) == "number") { 
if (li.find("a").attr("rel")) ajax(div, li); 
$(div[index]).stop(true,true).fadeIn(opts.fadeIn); 
tabs.stop(true, true).removeClass(opts.className); 
$(tabs[index]).stop(true, true).addClass(opts.className); 
} 
//非自動輪換 
else { 
var tabBody = div.filter(li.find("a").attr("href")); 
if (li.find("a").attr("rel")) ajax(div, li); 
tabBody.stop(true,true).fadeIn(opts.fadeIn); 
tabs.stop(true, true).removeClass(opts.className); 
li.stop(true, true).addClass(opts.className); 
} 
} 
function ajax(div, li) { 
var href = li.find("a").attr("href"); 
var rel = li.find("a").attr("rel"); //ajax請求url 
var i = div.filter(href); //當前div 
if (rel) { //如果ajax請求url不為空，只ajax一次 
i.html(opts.loadName); 
$.ajax({ 
url: rel, 
cache: false, 
success: function (html) { 
i.html(html); 
}, 
error: function () { 
i.html('加載錯誤，請重試！'); 
} 
}); 
li.find("a").removeAttr("rel"); //只ajax一次 
} 
} 
if (opts.autoFade) { 
var index = opts.firstOn + 1; 
setInterval(function () { 
if (index >= div.length) { 
index = 0; 
} 
tabsShow(div, $(this), index++); 
}, opts.autoFadeTime * 1000); 
} 
tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //綁定事件 
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自動觸發(fā)事件 
}); 
}; 
})(jQuery); 