一步一步制作jquery插件Tabs實現過程
2024-09-06 12:45:26
供稿：網友
tabs是現在網頁應用最廣的一種效果，jquery插件和非jquery插件也有不少，有一些朋友問我怎么用jquery.ui.tabs的ajax怎么只請求服務器一次原來我想其實很簡單，看看官方的API就了解，不過我在回復這些朋友之前，用firebug查看了官方的ui.tabs發現，聲明了ajax緩存，每點一個tabs時，仍然會有服務器請求這應該是服務器緩存，而不是實際上我們要求的只ajax一次，不再請求服務器了接下來我找了一下其它的tabs插件，基本上沒有符合要求的，不是太龐大就是太簡單，太過龐大的話不如用ui.tabs，文檔和代碼規范上都是可靠的因此，自制一個簡潔的tabs插件還是有必要的在設計之前，先整理好思路，實現tabs，自動輪換，ajax等主要功能，然后是dom的排列形式，這里采用傳統的
<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屬性，并將內容寫入對應的div中，再去掉rel屬性，這樣就只請求服務器一次，接下來都是div已經寫入的內容了
我這里沒有使用cookie，可以結合jquery.cookie插件，這樣即使用戶關閉網頁下次再打開，也不用請求服務器了
一，首先寫個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;
}
