一步一步制作jquery插件Tabs(ajax只请求一次效果78行完成)

2016-02-19 22:29 18 1 收藏

今天图老师小编给大家精心推荐个一步一步制作jquery插件Tabs(ajax只请求一次效果78行完成)教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

     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

    lia href="#tabs1"tabs1/a/li

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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//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) { 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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?

来源:http://www.tulaoshi.com/n/20160219/1628420.html

延伸阅读
标签: 电脑入门
编写图文并茂的wps文档时总是需要插入大量的图片。说到插入图片最方便的应该就是使用剪贴画库了,不过剪贴画库图片有限,更多的图片还是
标签: 服务器
一步一步学硬盘分区及大小调整 新买回来的硬盘相当于一张白纸,而为了能够更好地使用它,我们要在白纸上划分出若干小块,然后打上格子。如此一来,用户在白纸上写字或作画时,不仅有条有理,而且可以充分利用资源。今天,阿King为大家带来的学习计划就是对硬盘进行划分即打格子的操作,也就是通常所说的硬盘分区和调整分区。本次的主角就...
标签: 微信
微信在我们生活中越来越普及。小编每天也都会上微 信,看一些喜欢的公众平台的信息。十分的方便,不再一条条的去找信息了解。今天小编跟大家分享一个如何搭建微信公众平台,就是如果喊上自己的朋友、同事,共同建立一个小平台。会不会很好玩呢?有事就直接发一个消息就可以通知到啦。下面跟小编一起来看看如何搭建微信公众平台吧! ...
洗澡时,我们经常会把耳朵弄进水,那么耳朵进水怎么办?耳朵疼是怎么回事呢?如何保护耳朵呢?保护耳朵的方法有哪些呢?下面一起和图老师小编来看看耳朵进水怎么办吧! 首先我们来看看耳朵进水怎么办?耳朵进水最快的急救方法是什么,一起来看看吧! 耳朵进水怎么办 在洗澡或者是游泳时,我们常常会遇到耳朵进水的情况,这会...
标签: 分娩
出生3个月的孩子应该可以: 看到你出现就露出笑容;听到巨大的响声会吓一跳;会发出咿咿呀呀的声音;当别人对他说话时,他会安静下来或者微笑;好像能辨别出你的声音;当孩子遇到不同问题时,啼哭的方式会不一样。 出生6个月的孩子应该可以: 当孩子自己玩或和大人嬉戏时会发出咯咯的笑声;能简单地重复一些音节,比如“爸”;用声...

经验教程

913

收藏

15
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部