一步一步制作jquery插件Tabs（ajax只请求一次效果，78行完成）

核心提示： tabs是现在网页应用最广的一种效果，jquery插件和非jquery插件也有不少，一步一步制作jquery插件Tabs（ajax只请求一次效果，78行完成），有一些朋友问我怎么用jquery.ui.tabs的Ajax怎么只请求服务器一次原来我想其实很简单，看看官方的API就了解，请重试！'); 46 }

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?