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

      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的闭包概念，挺好的，有兴趣的朋友去看看

+ View Code?

1 2 3

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

二，插件命名，这里命名为aTabs，这样绑定的时候可以用$(...).aTabs()，本人英文名Allen，所以用a字头命名了~

+ View Code?

1 2 3 4

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

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

+ View Code?

1 2 3 4 5 6 7 8 9 10

$.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 href="http://api.jquery.com/jQuery.extend/" rel="noopener nofollow">http://api.jquery.com/jQuery.extend/</a>，看不懂英文的直接看其中的例子就行

四，编写主体功能，说明在代码中看注释

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

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) {　　//这里是关键ajax，通过操作rel的方式实现只请求服务器一次                 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);          //自动触发事件         });

最后，将以上整合，tabs插件就诞生了，下面是全部源码：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

/* * 作者：黑曜石 */ (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);          //自动触发事件         });     }; })(jQuery);