一步一步制作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);


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3