一步一步制作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的闭包概念，挺好的，有兴趣的朋友去看看
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); |
浙公网安备 33010602011771号