tabs是現(xiàn)在網(wǎng)頁應用最廣的一種效果，jquery插件和非jquery插件也有不少，有一些朋友問我怎么用jquery.ui.tabs的Ajax怎么只請求服務器一次
原來我想其實很簡單，看看官方的API就了解，不過我在回復這些朋友之前，用firebug查看了官方的ui.tabs發(fā)現(xiàn)，聲明了ajax緩存，每點一個tabs時，仍然會有服務器請求
這應該是服務器緩存，而不是實際上我們要求的只ajax一次，不再請求服務器了
接下來我找了一下其它的tabs插件，基本上沒有符合要求的，不是太龐大就是太簡單，太過龐大的話不如用ui.tabs，文檔和代碼規(guī)范上都是可靠的
因此，自制一個簡潔的tabs插件還是有必要的
在設計之前，先整理好思路，實現(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屬性，并將內容寫入對應的div中，再去掉rel屬性，這樣就只請求服務器一次，接下來都是div已經(jīng)寫入的內容了
我這里沒有使用cookie，可以結合jquery.cookie插件，這樣即使用戶關閉網(wǎng)頁下次再打開，也不用請求服務器了
一，首先寫個jquery插件的閉包，園子里這兩天有個朋友寫了javascript的閉包概念，挺好的，有興趣的朋友去看看
show sourceview sourcePRint?1 (function ($) {
2 //code here
3 })(jQuery);
二，插件命名，這里命名為aTabs，這樣綁定的時候可以用$(...).aTabs()，本人英文名Allen，所以用a字頭命名了~
show sourceview sourceprint?1 $.fn.aTabs = function (options) {
2 //api
3 //main function
4 }
三，把想好的功能寫成API，供外部修改
show sourceview sourceprint?01 $.fn.aTabs.defaults = {
02 firstOn: 0,
03 className: 'selected',
04 eventName: 'all', //click,mouserover,all
05 loadName: '加載中...', //ajax等待字符串
06 fadeIn: 'normal',
07 autoFade: false,
08 autoFadeTime: 3
09 };
10 var opts = $.extend({}, $.fn.aTabs.defaults, options); //這里可以將外部輸入的代替掉默認的值，$.extend作用詳見 <A href=">，看不懂英文的直接看其中的例子就行
四，編寫主體功能，說明在代碼中看注釋
show sourceview sourceprint?01 return this.each(function () { //這里為每個綁定dom插件
02 var target = $(this);
03 var div = target.children().not("ul,span"); //所有的tabs顯示體div
04 var tabs = target.find('ul:eq(0) li'); //所有的tabs頭部索引
05 function Tabs() {
06 if ($(this).hasClass(opts.className)) {
07 return false;
08 }
09 tabsShow(div, $(this));
10 return false;
11 }
12
13 function tabsShow(div, li, index) {
14 div.stop(true, true).hide();
15 //自動輪換用
16 if (typeof (index) == "number") {
17 if (li.find("a").attr("rel")) ajax(div, li);
18 $(div[index]).stop(true,true).fadeIn(opts.fadeIn);
19 tabs.stop(true, true).removeClass(opts.className);
20 $(tabs[index]).stop(true, true).addClass(opts.className);
21 }
22 //非自動輪換
23 else {
24 var tabBody = div.filter(li.find("a").attr("href"));
25 if (li.find("a").attr("rel")) ajax(div, li);
26 tabBody.stop(true,true).fadeIn(opts.fadeIn);
27 tabs.stop(true, true).removeClass(opts.className);
28 li.stop(true, true).addClass(opts.className);
29 }
30 }
31
32 function ajax(div, li) { //這里是關鍵ajax，通過操作rel的方式實現(xiàn)只請求服務器一次
33 var href = li.find("a").attr("href");
34 var rel = li.find("a").attr("rel"); //ajax請求url
35 var i = div.filter(href); //當前div
36 if (rel) { //如果ajax請求url不為空，只ajax一次
37 i.html(opts.loadName);
38 $.ajax({
39 url: rel,
40 cache: false,
41 success: function (html) {
42 i.html(html);
43 },
44 error: function () {
45 i.html('加載錯誤，請重試！');
46 }
47 });
48 li.find("a").removeAttr("rel"); //只ajax一次
49 }
50 }
51 if (opts.autoFade) {
52 var index = opts.firstOn + 1;
53 setInterval(function () {
54 if (index >= div.length) {
55 index = 0;
56 }
57 tabsShow(div, $(this), index++);
58 }, opts.autoFadeTime * 1000);
59 }
60
61 tabs.bind(opts.eventName == 'all' ? 'click mouSEOver' : opts.eventName, Tabs) //綁定事件
62 .filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自動觸發(fā)事件
63 });
最后，將以上整合，tabs插件就誕生了，下面是全部源碼：
show sourceview sourceprint?
新聞熱點
疑難解答
