もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第8回 タブプラグインを作ってみよう(後編)

この記事を読むのに必要な時間:およそ 11 分

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

jQueryプラグインについて

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

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

プラグイン(メソッド)の実行

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

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

function関数とメソッド

function関数

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

functionの例

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

functionの例 実行結果

functionの例 実行結果

メソッド

メソッドとは,あるオブジェクトに対して実行する関数を指します。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として認識され,安全に定義することができます。

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

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

タブパネルスクリプト - 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();
    }
});

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

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入