jqueryプラグインTabs_jqueryを作成する段階的な実装プロセス

タブは現在、Web ページで最も広く使用されているエフェクトであり、jquery プラグインや非 jquery プラグインもたくさんあります。何人かの友人が、サーバーに 1 回だけリクエストするために jquery.ui.tabs を使用する方法を尋ねました。実際には非常に簡単だと思います。公式の API は知っていますが、これらの友人に返信する前に、firebug を使用して公式の ui.tabs を確認したところ、タブがクリックされるたびに ajax キャッシュが宣言されていることがわかりました。これは、実際のキャッシュではなく、サーバー キャッシュであるはずです。次に、他のタブ プラグインを探しましたが、基本的に、これらのプラグインは見つかりませんでした。要件が大きすぎるか、単純すぎる場合は、ui.tabs を使用する方がよいでしょう。そのため、シンプルなタブ プラグインを作成する必要があります。デザインする前にまずアイデアを整理し、タブ、自動回転、Ajax などの主要な機能を実装します。ここでは従来の

の配置形式を使用します。 🎜>

>
• tabs2
Hello World!< ;/div>

ajax を使用する場合、rel を追加します。 a の属性を指定し、対応する div にコンテンツを書き込み、その後 rel 属性を削除します。これによりサーバーにリクエストされるのは 1 回だけで、残りは div が既に書き込んだコンテンツになります
ここでは使用しませんでした。 Cookie は jquery.cookie プラグインと組み合わせることができるため、ユーザーが Web ページを閉じて次に開いた場合でも、サーバーにリクエストする必要はありません
まず、jquery プラグインのクロージャーを作成します-in. 庭の友人がこの 2 日間で JavaScript を書きました。興味のある友人はぜひご覧ください。




code

コードは次のとおりです。 (function ($) { //code here

})(jQuery);

2 番目に、プラグインに名前を付けます。ここでは aTabs という名前なので、バインドできます $(...).aTabs() を使用します。私の英語名は Allen なので、プレフィックスを付けて名前を付けましたa~

コードをコピー

コードは次のとおりです: $.fn.aTabs = function (オプション) { //api //main function

}

第三に、外部変更用の API に必要な関数を記述します

コードをコピーします

コードは次のとおりです: $.fn.aTabs.defaults = { firstOn: 0, className: 'selected',

eventName: 'all', //click,mouserover,all

loadName: 'Loading ...', //ajax 待機文字列
fadeIn: 'normal' ,
autoFade: false,
autoFadeTime: 3
};
var opts = $.extend({} , $.fn.aTabs.defaults, options); $.extend の役割の詳細については、http://api.jquery.com/ を参照してください。 jQuery.extend/、英語がわからない場合は、例を見てください


4 番目に main 関数を記述します。コード内のコメントを参照してください

コードをコピーします

コードは次のとおりです:

return this.each(function () { //Here is each bound dom plug-in
var target = $(this);
var div = target.children().not( "ul,span"); //All tabs display body div
var tabs = target.find('ul:eq(0) li'); //All tabs header index
function Tabs( ) {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $(this));
return false;
}
function tabsShow(div, li, index) {
div.stop(true, true).hide();
//Automatic rotation using
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);
}
//Non-automatic rotation
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) { //Here is the key ajax, which only requests the server once by operating rel
var href = li.find("a").attr("href");
var rel = li.find( "a").attr("rel"); //ajax request url
var i = div.filter(href); //current div
if (rel) { //if ajax request url is not Empty, only ajax once
i.html(opts.loadName);
$.ajax({
url: rel,
cache: false,
success: function (html) {
i.html(html);
},
error: function () {
i.html('Loading error, please try again! ');
}
});
li.find("a").removeAttr("rel"); //Only ajax once
}
}
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) //Bind event
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //Automatically trigger events
});

Finally, after integrating the above, the tabs plug-in was born. Here is the full source code:

Copy code The code is as follows:

/*
* Author: Obsidian
*/
(function ($) {
$.fn. aTabs = function (options) {
$.fn.aTabs.defaults = {
firstOn: 0,
className: 'selected',
eventName: 'all', //click,mouserover, all
loadName: 'Loading...', //ajax waiting string
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"); //All tabs display body div
var tabs = target.find('ul:eq(0) li'); //All tabs headers Department index
function Tabs() {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $(this)) ;
return false;
}
function tabsShow(div, li, index) {
div.stop(true, true).hide();
//Automatic rotation
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);
}
//Non-automatic rotation
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 request url
var i = div.filter(href); //current div
if (rel) { //If ajax request url is not empty, only ajax once
i .html(opts.loadName);
$.ajax({
url: rel,
cache: false,
success: function (html) {
i.html(html);
},
error: function () {
i.html('Loading error, please try again! ');
}
});
li.find("a").removeAttr("rel"); //Only ajax once
}
}
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) //Bind event
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //Automatically trigger events
});
};
})(jQuery);