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

第7回 タブパネルを実装する(前編)

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

開いておきたいタブを選択できるように改良する

上記で,タブパネルのベースが完成しました。しかし上記のスクリプトでは,一つ目のタブが強制的に選択された状態になります。機能を少し追加して,li要素のclassにactiveがあれば,そのタブを優先して開いておくように改良してみましょう。

下記の部分で一つ目のタブを開いた状態にしているので,まずはこれをやめます。

タブパネル実装 - JS - 9

tabPanel.not(':first').hide();
	
tab.eq(0).addClass('active');

残りの手順としては

  • eachメソッドを使い,classにactiveをもっているタブを探す
  • activeをもっていれば,click時と同じ動作をさせる
  • eachメソッド終了後に,activeになっているタブがなければ,最初のタブを表示状態にする

まずはeachメソッドを使ってclassにactiveをもっているタブを探して,あればclick時と同じ動作をさせる

2つ同時にやってしまいます。

タブパネル実装 - JS - 10

tab.click(function(){
    // a :
    var targetTabId = $('a',this).attr('hash');
    
    tab.removeClass('active');
    tabPanel.hide();
    $(this).addClass('active');
    $(targetTabId).show();
    // : a
    
    return false;
}).each(function(){
    if($(this).hasClass('active')){ // ※1
        // b :
        var targetTabId = $('a',this).attr('hash');
        
        tab.removeClass('active');
        tabPanel.hide();
        $(this).addClass('active');
        $(targetTabId).show();
        // : b
    }
});

eachメソッドで順番に回しているタブのclassにactiveがあるかどうかを確かめるには,※1の箇所のようにhasClassメソッドを使います。classにactiveがあればtrueが,なければfalseが返されます。⁠if(条件値){ 処理1 }else{ 処理2 }」は,括弧内がtrueなら処理1,falseなら処理2を行い,サンプルのようにelse以下を省略することもできます。また,click時とeachメソッド内で実行する内容全く同じなので(// a : : a//と// b : : b //の部分)⁠以下のようにひとつにまとめてしまうことにより,より見やすくシンプルなソースコードになります。

タブパネル実装 - JS - 11

// functionとしてまとめる
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); // thisを引数として渡す
    return false;
}).each(function(){
    if($(this).hasClass('active')){
        tabSet(this); // thisを引数として渡す
    }
});

実行時にタブを渡す必要があるので(thisで指定いた部分)⁠まとめたfunction tabSetではthisを引数で渡せるようにしておきます。functionに置き換えるときは,thisだった部分をtargetに置き換えるだけです。

eachメソッド終了後に,activeになっているタブがなければ,最初のタブを表示状態にする

最後に選択されているタブがない場合の処理を追加します。選択されているタブがないということは,開いているタブパネルがひとつではない,つまり全てのタブパネルが開いている状態なので,tabPanel.filter(':visible').length!=1と表すことができます。これをif文の条件値に入れることで,そのときだけに処理を実行することができます。

ここで,ベースのスクリプトにあった,初期化処理を行えばいいのです。

タブパネル実装 - JS - 12

if(tabPanel.filter(':visible').length!=1){
    tab.eq(0).addClass('active');
    tabPanel.not(':first').hide();
}

これまでのソースコードをまとめるたものが以下になります。

タブパネル実装 - JS - 13

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

以上で「開いておきたいタブを選択できるように改良」したタブパネルスクリプトが完成しました。

今回のまとめ

タブパネルを実装する,ということをもしかすると最初は,難しい,と感じたかも知れません。しかし,完成したコードを見てもらえれば分かる通り,jQueryを使えばたった20数行のシンプルなコードで実装することができてしまいました。

jQueryを使えば,実行したい命令文を箇条書きのように並べたり,メソッドチェーンで繋いでいくだけでよいのです。

次回は,今回作成したこのシンプルなタブパネルスクリプト,jQueryプラグインにしてみたいと思います。

著者プロフィール

長谷川広武(はせがわひろむ;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/

コメント

コメントの記入