一步一步制作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的闭包概念，挺好的，有兴趣的朋友去看看
代码如下:

<br>(function ($) { <br>//code here <br>})(jQuery); <br> <br>二，插件命名，这里命名为aTabs，这样绑定的时候可以用$(...).aTabs()，本人英文名Allen，所以用a字头命名了~ <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>$.fn.aTabs = function (options) { <br>//api <br>//main function <br>} <br> <br>三，把想好的功能写成API，供外部修改 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>$.fn.aTabs.defaults = { <br>firstOn: 0, <br>className: 'selected', <br>eventName: 'all', //click,mouserover,all <br>loadName: '加载中...', //ajax等待字符串 <br>fadeIn: 'normal', <br>autoFade: false, <br>autoFadeTime: 3 <br>}; <br>var opts = $.extend({}, $.fn.aTabs.defaults, options); //这里可以将外部输入的代替掉默认的值，$.extend作用详见 <A href="http://api.jquery.com/jQuery.extend/">http://api.jquery.com/jQuery.extend/</A>，看不懂英文的直接看其中的例子就行 <br> <br>四，编写主体功能，说明在代码中看注释 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>return this.each(function () { //这里为每个绑定dom插件 <br>var target = $(this); <br>var div = target.children().not("ul,span"); //所有的tabs显示体div <br>var tabs = target.find('ul:eq(0) li'); //所有的tabs头部索引 <br>function Tabs() { <br>if ($(this).hasClass(opts.className)) { <br>return false; <br>} <br>tabsShow(div, $(this)); <br>return false; <br>} <br>function tabsShow(div, li, index) { <br>div.stop(true, true).hide(); <br>//自动轮换用 <br>if (typeof (index) == "number") { <br>if (li.find("a").attr("rel")) ajax(div, li); <br>$(div[index]).stop(true,true).fadeIn(opts.fadeIn); <br>tabs.stop(true, true).removeClass(opts.className); <br>$(tabs[index]).stop(true, true).addClass(opts.className); <br>} <br>//非自动轮换 <br>else { <br>var tabBody = div.filter(li.find("a").attr("href")); <br>if (li.find("a").attr("rel")) ajax(div, li); <br>tabBody.stop(true,true).fadeIn(opts.fadeIn); <br>tabs.stop(true, true).removeClass(opts.className); <br>li.stop(true, true).addClass(opts.className); <br>} <br>} <br>function ajax(div, li) {　　//这里是关键ajax，通过操作rel的方式实现只请求服务器一次 <br>var href = li.find("a").attr("href"); <br>var rel = li.find("a").attr("rel"); //ajax请求url <br>var i = div.filter(href); //当前div <br>if (rel) { //如果ajax请求url不为空，只ajax一次 <br>i.html(opts.loadName); <br>$.ajax({ <br>url: rel, <br>cache: false, <br>success: function (html) { <br>i.html(html); <br>}, <br>error: function () { <br>i.html('加载错误，请重试！'); <br>} <br>}); <br>li.find("a").removeAttr("rel"); //只ajax一次 <br>} <br>} <br>if (opts.autoFade) { <br>var index = opts.firstOn + 1; <br>setInterval(function () { <br>if (index >= div.length) { <br>index = 0; <br>} <br>tabsShow(div, $(this), index++); <br>}, opts.autoFadeTime * 1000); <br>} <br>tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //绑定事件 <br>.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自动触发事件 <br>}); <br> <br>最后，将以上整合，tabs插件就诞生了，下面是全部源码： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>/* <br>* 作者：黑曜石 <br>*/ <br>(function ($) { <br>$.fn.aTabs = function (options) { <br>$.fn.aTabs.defaults = { <br>firstOn: 0, <br>className: 'selected', <br>eventName: 'all', //click,mouserover,all <br>loadName: '加载中...', //ajax等待字符串 <br>fadeIn: 'normal', <br>autoFade: false, <br>autoFadeTime: 3 <br>}; <br>var opts = $.extend({}, $.fn.aTabs.defaults, options); <br>return this.each(function () { <br>var target = $(this); <br>var div = target.children().not("ul,span"); //所有的tabs显示体div <br>var tabs = target.find('ul:eq(0) li'); //所有的tabs头部索引 <br>function Tabs() { <br>if ($(this).hasClass(opts.className)) { <br>return false; <br>} <br>tabsShow(div, $(this)); <br>return false; <br>} <br>function tabsShow(div, li, index) { <br>div.stop(true, true).hide(); <br>//自动轮换用 <br>if (typeof (index) == "number") { <br>if (li.find("a").attr("rel")) ajax(div, li); <br>$(div[index]).stop(true,true).fadeIn(opts.fadeIn); <br>tabs.stop(true, true).removeClass(opts.className); <br>$(tabs[index]).stop(true, true).addClass(opts.className); <br>} <br>//非自动轮换 <br>else { <br>var tabBody = div.filter(li.find("a").attr("href")); <br>if (li.find("a").attr("rel")) ajax(div, li); <br>tabBody.stop(true,true).fadeIn(opts.fadeIn); <br>tabs.stop(true, true).removeClass(opts.className); <br>li.stop(true, true).addClass(opts.className); <br>} <br>} <br>function ajax(div, li) { <br>var href = li.find("a").attr("href"); <br>var rel = li.find("a").attr("rel"); //ajax请求url <br>var i = div.filter(href); //当前div <br>if (rel) { //如果ajax请求url不为空，只ajax一次 <br>i.html(opts.loadName); <br>$.ajax({ <br>url: rel, <br>cache: false, <br>success: function (html) { <br>i.html(html); <br>}, <br>error: function () { <br>i.html('加载错误，请重试！'); <br>} <br>}); <br>li.find("a").removeAttr("rel"); //只ajax一次 <br>} <br>} <br>if (opts.autoFade) { <br>var index = opts.firstOn + 1; <br>setInterval(function () { <br>if (index >= div.length) { <br>index = 0; <br>} <br>tabsShow(div, $(this), index++); <br>}, opts.autoFadeTime * 1000); <br>} <br>tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //绑定事件 <br>.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自动触发事件 <br>}); <br>}; <br>})(jQuery); <br></li><li>            </li><li>                                </li></ol></pre></li></ol></pre></li></ol></pre></li></ol></pre>