|
|
<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>
一個(gè)li對(duì)應(yīng)一個(gè)div的方式，當(dāng)ajax時(shí)，添加一個(gè)a的rel屬性，并將內(nèi)容寫入對(duì)應(yīng)的div中，再去掉rel屬性，這樣就只請(qǐng)求服務(wù)器一次，接下來(lái)都是div已經(jīng)寫入的內(nèi)容了
我這里沒(méi)有使用cookie，可以結(jié)合jquery.cookie插件，這樣即使用戶關(guān)閉網(wǎng)頁(yè)下次再打開，也不用請(qǐng)求服務(wù)器了
一，首先寫個(gè)jquery插件的閉包，園子里這兩天有個(gè)朋友寫了Javascript的閉包概念，挺好的，有興趣的朋友去看看
復(fù)制代碼 代碼如下:
(function ($) {
//code here
})(jQuery);
二，插件命名，這里命名為aTabs，這樣綁定的時(shí)候可以用$(...).aTabs()，本人英文名Allen，所以用a字頭命名了~
復(fù)制代碼 代碼如下:
$.fn.aTabs = function (options) {
//api
//main function
}
三，把想好的功能寫成API，供外部修改
復(fù)制代碼 代碼如下:
$.fn.aTabs.defaults = {
firstOn: 0,
className: 'selected',
eventName: 'all', //click,mouserover,all
loadName: '加載中...', //ajax等待字符串
fadeIn: 'normal',
autoFade: false,
autoFadeTime: 3
};
var opts = $.extend({}, $.fn.aTabs.defaults, options); //這里可以將外部輸入的代替掉默認(rèn)的值，$.extend作用詳見(jiàn) <A >http://api.jquery.com/jQuery.extend/</A>，看不懂英文的直接看其中的例子就行
四，編寫主體功能，說(shuō)明在代碼中看注釋
復(fù)制代碼 代碼如下:
return this.each(function () { //這里為每個(gè)綁定dom插件
var target = $(this);
var div = target.children().not("ul,span"); //所有的tabs顯示體div
var tabs = target.find('ul:eq(0) li'); //所有的tabs頭部索引
function Tabs() {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $(this));
return false;
}
function tabsShow(div, li, index) {
div.stop(true, true).hide();
//自動(dòng)輪換用
if (typeof (index) == "number") {
if (li.find("a").attr("rel")) ajax(div, li);
$(div[index]).stop(true,true).fadeIn(opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className);
$(tabs[index]).stop(true, true).addClass(opts.className);
}
//非自動(dòng)輪換
else {
var tabBody = div.filter(li.find("a").attr("href"));
if (li.find("a").attr("rel")) ajax(div, li);
tabBody.stop(true,true).fadeIn(opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className);
li.stop(true, true).addClass(opts.className);
}
}
function ajax(div, li) { //這里是關(guān)鍵ajax，通過(guò)操作rel的方式實(shí)現(xiàn)只請(qǐng)求服務(wù)器一次
var href = li.find("a").attr("href");
var rel = li.find("a").attr("rel"); //ajax請(qǐng)求url
var i = div.filter(href); //當(dāng)前div
if (rel) { //如果ajax請(qǐng)求url不為空，只ajax一次
i.html(opts.loadName);
$.ajax({
url: rel,
cache: false,
success: function (html) {
i.html(html);
},
error: function () {
i.html('加載錯(cuò)誤，請(qǐng)重試！');
}
});
li.find("a").removeAttr("rel"); //只ajax一次
}
}
if (opts.autoFade) {
var index = opts.firstOn + 1;
setInterval(function () {
if (index >= div.length) {
index = 0;
}
tabsShow(div, $(this), index++);
}, opts.autoFadeTime * 1000);
}
tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //綁定事件
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自動(dòng)觸發(fā)事件
});
最后，將以上整合，tabs插件就誕生了，下面是全部源碼：
復(fù)制代碼 代碼如下:
/*
* 作者：黑曜石
*/
(function ($) {
$.fn.aTabs = function (options) {
$.fn.aTabs.defaults = {
firstOn: 0,
className: 'selected',
eventName: 'all', //click,mouserover,all
loadName: '加載中...', //ajax等待字符串
fadeIn: 'normal',
autoFade: false,
autoFadeTime: 3
};
var opts = $.extend({}, $.fn.aTabs.defaults, options);
return this.each(function () {
var target = $(this);
var div = target.children().not("ul,span"); //所有的tabs顯示體div
var tabs = target.find('ul:eq(0) li'); //所有的tabs頭部索引
function Tabs() {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $(this));
return false;
}
function tabsShow(div, li, index) {
div.stop(true, true).hide();
//自動(dòng)輪換用
if (typeof (index) == "number") {
if (li.find("a").attr("rel")) ajax(div, li);
$(div[index]).stop(true,true).fadeIn(opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className);
$(tabs[index]).stop(true, true).addClass(opts.className);
}
//非自動(dòng)輪換
else {
var tabBody = div.filter(li.find("a").attr("href"));
if (li.find("a").attr("rel")) ajax(div, li);
tabBody.stop(true,true).fadeIn(opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className);
li.stop(true, true).addClass(opts.className);
}
}
function ajax(div, li) {
var href = li.find("a").attr("href");
var rel = li.find("a").attr("rel"); //ajax請(qǐng)求url
var i = div.filter(href); //當(dāng)前div
if (rel) { //如果ajax請(qǐng)求url不為空，只ajax一次
i.html(opts.loadName);
$.ajax({
url: rel,
cache: false,
success: function (html) {
i.html(html);
},
error: function () {
i.html('加載錯(cuò)誤，請(qǐng)重試！');
}
});
li.find("a").removeAttr("rel"); //只ajax一次
}
}
if (opts.autoFade) {
var index = opts.firstOn + 1;
setInterval(function () {
if (index >= div.length) {
index = 0;
}
tabsShow(div, $(this), index++);
}, opts.autoFadeTime * 1000);
}
tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //綁定事件
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自動(dòng)觸發(fā)事件
});
};
})(jQuery);
JavaScript技術(shù)：一步一步制作jquery插件Tabs實(shí)現(xiàn)過(guò)程，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
