一步一步制作jquery插件Tabs

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的闭包概念，挺好的，有兴趣的朋友去看看
1　(function　($)　{
2　//code　here
3　})(jQuery);

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

1　$.fn.aTabs　=　function　(options)　{
2　//api
3　//main　function
4　}

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

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/</a>，看不懂英文的直接看其中的例子就行

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

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插件就诞生了，下面是全部源码：

01　/*
02　*　作者：黑曜石
03　*/
04　(function　($)　{
05　　　　　$.fn.aTabs　=　function　(options)　{
06　　　　　　　　　$.fn.aTabs.defaults　=　{
07　　　　　　　　　　　　　firstOn:　0,
08　　　　　　　　　　　　　className:　'selected',
09　　　　　　　　　　　　　eventName:　'all',　　　　　　　　　　　//click,mouserover,all
10　　　　　　　　　　　　　loadName:　'加载中...',　　　　　//ajax等待字符串
11　　　　　　　　　　　　　fadeIn:　'normal',
12　　　　　　　　　　　　　autoFade:　false,
13　　　　　　　　　　　　　autoFadeTime:　3
14　　　　　　　　　};
15　　　　　　　　　var　opts　=　$.extend({},　$.fn.aTabs.defaults,　options);
16　　
17　　　　　　　　　return　this.each(function　()　{
18　　　　　　　　　　　　　var　target　=　$(this);
19　　　　　　　　　　　　　var　div　=　target.children().not("ul,span");　　//所有的tabs显示体div
20　　　　　　　　　　　　　var　tabs　=　target.find('ul:eq(0)　li');　　　//所有的tabs头部索引
21　　　　　　　　　　　　　function　Tabs()　{
22　　　　　　　　　　　　　　　　　if　($(this).hasClass(opts.className))　{
23　　　　　　　　　　　　　　　　　　　　　return　false;
24　　　　　　　　　　　　　　　　　}
25　　　　　　　　　　　　　　　　　tabsShow(div,　$(this));
26　　　　　　　　　　　　　　　　　return　false;
27　　　　　　　　　　　　　}
28　　
29　　　　　　　　　　　　　function　tabsShow(div,　li,　index)　{
30　　　　　　　　　　　　　　　　　div.stop(true,　true).hide();
31　　　　　　　　　　　　　　　　　//自动轮换用
32　　　　　　　　　　　　　　　　　if　(typeof　(index)　==　"number")　{
33　　　　　　　　　　　　　　　　　　　　　if　(li.find("a").attr("rel"))　ajax(div,　li);
34　　　　　　　　　　　　　　　　　　　　　$(div[index]).stop(true,true).fadeIn(opts.fadeIn);
35　　　　　　　　　　　　　　　　　　　　　tabs.stop(true,　true).removeClass(opts.className);
36　　　　　　　　　　　　　　　　　　　　　$(tabs[index]).stop(true,　true).addClass(opts.className);
37　　　　　　　　　　　　　　　　　}
38　　　　　　　　　　　　　　　　　//非自动轮换
39　　　　　　　　　　　　　　　　　else　{
40　　　　　　　　　　　　　　　　　　　　　var　tabBody　=　div.filter(li.find("a").attr("href"));
41　　　　　　　　　　　　　　　　　　　　　if　(li.find("a").attr("rel"))　ajax(div,　li);
42　　　　　　　　　　　　　　　　　　　　　tabBody.stop(true,true).fadeIn(opts.fadeIn);
43　　　　　　　　　　　　　　　　　　　　　tabs.stop(true,　true).removeClass(opts.className);
44　　　　　　　　　　　　　　　　　　　　　li.stop(true,　true).addClass(opts.className);
45　　　　　　　　　　　　　　　　　}
46　　　　　　　　　　　　　}
47　　
48　　　　　　　　　　　　　function　ajax(div,　li)　{
49　　　　　　　　　　　　　　　　　var　href　=　li.find("a").attr("href");
50　　　　　　　　　　　　　　　　　var　rel　=　li.find("a").attr("rel");　　　　　//ajax请求url
51　　　　　　　　　　　　　　　　　var　i　=　div.filter(href);　　　　　　　　　　　　　　　　　//当前div
52　　　　　　　　　　　　　　　　　if　(rel)　{　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//如果ajax请求url不为空，只ajax一次
53　　　　　　　　　　　　　　　　　　　　　i.html(opts.loadName);
54　　　　　　　　　　　　　　　　　　　　　$.ajax({
55　　　　　　　　　　　　　　　　　　　　　　　　　url:　rel,
56　　　　　　　　　　　　　　　　　　　　　　　　　cache:　false,
57　　　　　　　　　　　　　　　　　　　　　　　　　success:　function　(html)　{
58　　　　　　　　　　　　　　　　　　　　　　　　　　　　　i.html(html);
59　　　　　　　　　　　　　　　　　　　　　　　　　},
60　　　　　　　　　　　　　　　　　　　　　　　　　error:　function　()　{
61　　　　　　　　　　　　　　　　　　　　　　　　　　　　　i.html('加载错误，请重试！');
62　　　　　　　　　　　　　　　　　　　　　　　　　}
63　　　　　　　　　　　　　　　　　　　　　});
64　　　　　　　　　　　　　　　　　　　　　li.find("a").removeAttr("rel");　　//只ajax一次
65　　　　　　　　　　　　　　　　　}
66　　　　　　　　　　　　　}
67　　　　　　　　　　　　　if　(opts.autoFade)　{
68　　　　　　　　　　　　　　　　　var　index　=　opts.firstOn　+　1;
69　　　　　　　　　　　　　　　　　setInterval(function　()　{
70　　　　　　　　　　　　　　　　　　　　　if　(index　>=　div.length)　{
71　　　　　　　　　　　　　　　　　　　　　　　　　index　=　0;
72　　　　　　　　　　　　　　　　　　　　　}
73　　　　　　　　　　　　　　　　　　　　　tabsShow(div,　$(this),　index++);
74　　　　　　　　　　　　　　　　　},　opts.autoFadeTime　*　1000);
75　　　　　　　　　　　　　}
76　　
77　　　　　　　　　　　　　tabs.bind(opts.eventName　==　'all'　?　'click　mouseover'　:　opts.eventName,　Tabs)　　　//绑定事件
78　　　　　　　　　　　　　　　　　.filter(':first').trigger(opts.eventName　==　'all'　?　'click'　:　opts.eventName);　　　　　　　　　　//自动触发事件
79　　　　　　　　　});
80　　　　　};
81　})(jQuery);