前回つくったタブパネルスクリプトをもとにして，タブプラグインを作ってみましょう。プラグインを作る，というと何か難しいことのように聞こえるかもしれません。前回作ったタブパネルスクリプトのように，なにも難しいことはありません。まずはプラグインについて少し考えてみましょう。

jQueryプラグインについて

前回の始めに言及したように，プラグインとは，既に完成しているJavaScriptファイルを読み込み，実行するだけで簡単に利用できるものを指すことにします。

例えば，jQueryプラグインは通常以下のようにして実行できるようになっていると思います。

jQuery(function(){
    $('div.tabArea').tabPanel();
    // 対象のjQueryオブジェトに対してメソッドを実行する
});

$('div.tabArea')に対して，tabPanelというメソッドを実行するという意味ですね。メソッドを実行するだけで，ある程度の機能を提供できれば，それは立派なプラグインです。

function関数とメソッド

function関数

まずはメソッドについておさらいをしましょう。JavaScriptでは，何か機能をまとめるときに，functionという関数を使います。もっとも簡単なfunctionは以下のようなものです。sample()を実行すると，FirebugのConsoleに「Hello world」という文字列が表示されるはずです。

function sample(){
    alert('Hello world');
}
 
sample(); // 実行する

メソッド

メソッドとは，あるオブジェクトに対して実行する関数を指します。jQueryプラグインにおけるメソッドの特徴として，関数と違うのは，あるオブジェクトをthisというキーワードで受け取ることができる，ということです。

例をあげてみます。

(function($){
    $.fn.sample = function(){
        console(this);
    }
})(jQuery);
 
jQuery(function($){
    $('div').sample(); // メソッドを実行する
});

jQuery(function($){ ~ });と(function($){ ~ })(jQuery);

jQuery(function($){ ~ });

jQueryのメソッドや処理を実行する場合は，この中に記入します。window.onloadよりも早いタイミング，DOM Readyの段階で処理が実行されます。

(function($){ ~ })(jQuery);

カプセル化（隠蔽）と言い，最初の($)を一番最後の(jQuery)として認識させます。

実行するものはjQuery(function($){});にまとめて入れてしまえばいいのですが，プラグインなど，そのファイル単体で実行予定がないものはjQuery(function($){});に入れる必要はありません。そのまま書いてしまうと，他の場所で$を使っている場合に干渉してしまうので，jQueryプラグインを作成する際には，(function($){})(jQuery);内に入れると，その中では$はjQueryとして認識され，安全に定義することができます。

タブパネルスクリプトの関数化とメソッド化

前回作ったスクリプトは以下ですが

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();
    }
});

このスクリプトをメソッドにすればいいだけの話なのです。