前回つくったタブパネルスクリプトをもとにして,
jQueryプラグインについて
前回の始めに言及したように,
例えば,
プラグイン
jQuery(function(){
$('div.tabArea').tabPanel();
// 対象のjQueryオブジェトに対してメソッドを実行する
});
$('div.
function関数とメソッド
function関数
まずはメソッドについておさらいをしましょう。JavaScriptでは,
functionの例
function sample(){
alert('Hello world');
}
sample(); // 実行する
メソッド
メソッドとは,
例をあげてみます。
メソッドの例
(function($){
$.fn.sample = function(){
console(this);
}
})(jQuery);
jQuery(function($){
$('div').sample(); // メソッドを実行する
});
jQuery(function($){ ~ });と(function($){ ~ })(jQuery);
jQuery(function($){ ~ });
jQueryのメソッドや処理を実行する場合は,
(function($){ ~ })(jQuery);
カプセル化
実行するものはjQuery(function($){});にまとめて入れてしまえばいいのですが,
タブパネルスクリプトの関数化とメソッド化
前回作ったスクリプトは以下ですが
タブパネルスクリプト - JS
jQuery(function($){
var tabArea = $('div.tabArea');
var tabPanel = $('div.tabPanel',tabArea);
var tab = $('ul.tab li',tabArea);
var tabSet = function(target){
var targetTabId = $('a',target).attr('hash');
tab.removeClass('active');
tabPanel.hide();
$(target).addClass('active');
$(targetTabId).show();
}
tab.click(function(){
tabSet(this);
return false;
}).each(function(){
if($(this).hasClass('active')){
tabSet(this);
}
});
if(tabPanel.filter(':visible').length!=1){
tab.eq(0).addClass('active');
tabPanel.not(':first').hide();
}
});
このスクリプトをメソッドにすればいいだけの話なのです。