DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 一步一步制作jquery插件Tabs(ajax只請求一次效果,78行完成)
一步一步制作jquery插件Tabs(ajax只請求一次效果,78行完成)
編輯:AJAX詳解     

  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的閉包概念,挺好的,有興趣的朋友去看看

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="http://api.jquery.com/jQuery.extend/http://api.jquery.com/jQuery.extend/">http://api.jquery.com/jQuery.extend/</A>,看不懂英文的直接看其中的例子就行

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

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的方式實現只請求服務器一次 

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);          //自動觸發事件 

63         });

最後,將以上整合,tabs插件就誕生了,下面是全部源碼:

show sourcevIEw sourceprint?

-

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved