第5回　エフェクトの豊富なタブパネルを実装する（フェード切り替えなど）

少ないスペースを利用して多くの情報を掲載する際によく使われるタブパネルは、更新情報などでカテゴリー毎に掲載したり、複数の商品の紹介などに使うことができます。今回は切替時のアニメーションやマウスクリックやロールオーバーなども活用して作成してみました。また汎用性を考えてjQueryプラグインとして用意しました。

解説：（有）ムーニーワークス　ハヤシユタカ

前回は、ベーシックなページの先頭へ戻るのアニメーションやボタンの出現方法についてまとめました。今回は、ベーシックでよく見るタブパネルの実装を行ってみます。切替時のアニメーションやマウスクリックやロールオーバーなどでの切り替えなどいくつかのバリエーションと、汎用性も考えてjQueryプラグインを作成してみました。

■今回作成したサンプル

【サンプル1】：「タブパネルの幅をテキストのサイズによってと一定に固定させるサンプル」
【サンプル2】：「クリックやマウスオーバーでの切り替えやフェードアニメーションのサンプル」

●タブエリアのHTMLの作成

タブの作成にはタブ部分にはリスト要素を使用して必要な数のタブを用意し、切り替えの際のidとclassを用意します。表示させる内容には、div要素内にarticle要素にレイアウト用のclassの領域内を常時内容としてそれぞれidを設定します。class内を切り替えするのでこちらのHTML内は表示したい内容を自由にレイアウトすることができます。

■■■■　HTMLコード

<section id="contentContainer" class="inner">
<h1 class="contentTitle">Tab Panel Sample</h1>

<section id="tabContainer1" class="jQdmtab tabContainer">
<h2>Tab Pattern1 - Normal</h2>
<ul class="controls">
<li><a href="#tab1_1">Balaeniceps rex</a></li>
<li><a href="#tab1_2">Sumatran Tiger</a></li>
<li><a href="#tab1_3">Lion</a></li>
<li><a href="#tab1_4">Diceros bicornis</a></li>
</ul>

<div class="tabContentsContainer">

<article id="tab1_1" class="post">
<div class="entry-thumbnail"><img alt="" src="img/01.jpg"></div>
<div class="entry-contentContainer">
<header class="entry-header">
<h1 class="entry-title">ハシビロコウ Balaeniceps rex</h1>
</header>
<div class="entry-content clearfix">
<p>エチオピア区の南スーダンからザンビアにかけての湿地に分布する。
IUCNのレッドリストでは絶滅危惧II類に指定されており、
ワシントン条約によって国際取引が規制されている。
ハシビロコウ亜科は、ハシビロコウ1属1種のみ。</p>
・・・省略・・・
</div>
</div>
</article>

<article id="tab1_2" class="post">
・・・省略・・・
</div>
</article>

<article id="tab1_3" class="post">
・・・省略・・・
</div>
</article>

<article id="tab1_4" class="post">
・・・省略・・・
</div>
</article>

</div>
</section>
</section>


<!-- フッター部分のソースコード -->
<p class="pagetop inner"><a href="#wrapper">PAGE TOP</a></p>

●タブボタンの幅について

サンプル1の上の作例ではタブ部分の見出しのテキスト内容によってタブの幅は自動的にサイズが伸びていくようになっています。どのような文字量になっても自動的に幅が調整され、同じデザインになるため便利ですが、タブの数があまりなく、テキストの文字量が違う場合はデザイン的にバラバラな感じがしていまいます。こういう場合はCSSの設定で統一感のあるタブを作ることもできますので、使用する用途によって使いわけましょう。

タブのボタンをテキスト量によって可変と固定のパターン。用途によって使いわけよう

■■■■　CSSコード

.tabContainer .controls li {
  display: inline-block;
  word-wrap: break-word;
}

.tabContainer .controls li a {
  display: block;
  padding: 0.5em 1em;
  background: #333;
  color: #fff;
  border-radius: 8px 8px 0 0 ;
  behavior: url(PIE.htc);
}
.tabContainer .controls li.current a,
.tabContainer .controls li a:hover {
  color: #333;
  background: #f0f0f0;
}

/* タブ固定幅 */
.tabContainer.tabWidthFixed .controls li {
  width: 24%;
}

.tabContainer .tabContentsContainer>* {
  position: relative;
  top: 0;
  left: 0;
  width: 94%;
  padding: 3%;
}

ただし、スマートフォンなどモバイル環境の場合はウインドウサイズが小さいため、タブの数やテキスト文字数はある程度ルールを作って制限すると良いでしょう。

スマートフォンでは幅が狭いのでタブの数と文字数によっては改行される

タブの切り替えのJSを作成

今回のタブ機能を実装するJavascriptは、この要素に囲まれた箇所をタブ化するということが直感的にわかります。オプションによって最初から開いているタブを指定できるようにするなどの使い勝手を考慮し、jQueryプラグインとして作成することにしました。jQueryプラグイン作成と言っても、それほど難易度が高いものではなく一定の型に則って通常通りjQueryを記述すれば、それをプラグイン化することができます。

■■■■　JSコード

;(function(d,$){

  // 変数のデフォルト値
  var jQdmtab_defaults = {
    tabContentsContainer: '.tabContentsContainer',
    tabEventAction: 'click',
   current: 0,
    currentSelector: 'current',
  };

  $.fn.jQdmtab = function(options){

    // 変数を設定
    var defaults = jQdmtab_defaults;
    var setting = $.extend( defaults, options);

    var _$obj = $(this.get(0)),
    _s = $.data( $(this), setting ),
    _p = {
      tabs: _$obj.find('li'),
      tabCn: _$obj.find(_s.tabContentsContainer),
      tabCnHeight: function(){
        var _$cns = _p.tabCn.children(),
        _len = _$cns.length,
        _hi = 0;
        while(_len > 0){
          _hi = Math.max( _hi, _$cns.eq(--_len).height());
        }
        return _hi + 40;
      },
      current: _s.current
    };

    // ページ表示時に最初に設定したタブを開く
    tabChangeCurrent(_p.current);
    _p.tabCn.children().not(':eq('+ _p.current +')').css({
      display: 'none',
      opacity: 0
    });
    _p.tabCn.css({
      position: 'relative',
      overflow: 'hidden',
      background: '#f0f0f0',
      height: _p.tabCnHeight()
    });

    // タブにクリックイベントを追加
    _p.tabs.on( _s.tabEventAction, function(e){
      if(typeof e.preventDefault() === 'function') {
        e.preventDefaut();
      }

      var _$t = $(this),
      _index = _$t.index();
      _current = _p.current;

      if(_index != _current && !_p.isAnimate) {
        hideTabContent(_current);
        _p.current = _index;
        showTabContent(_index);
      }
    });

    // タブコンテンツの非表示処理
    function hideTabContent(_current){

      var _$target = _p.tabCn.children().eq(_current);
      tabChangeCurrent(_current);

     _$target.css({
        left: 0,
        opacity: 0,
        display: 'none',
        position: 'relative'
      });
    }

    // タブコンテンツの表示処理
    function showTabContent(_t){

      var _$target = _p.tabCn.children().eq(_t);
      tabChangeCurrent(_t);
      _$target.css({
        display: 'block',
        position: 'relative',
        opacity: 1
      });
    }

    // クリックされたタブをカレント（現在）のタブに変更する
    function tabChangeCurrent(_t){
      _p.tabs.eq(_t).toggleClass(_s.currentSelector);
    }

  }

  // オリジナルプラグインの有効化
  // ノーマルタイプ
  $('#tabContainer1').jQdmtab();

  // オリジナルプラグインの有効化：ノーマルタイプ
  // ノーマルタイプ、タブ幅固定タイプ
  $('#tabContainer1a').jQdmtab();

}(document, jQuery));

●タブの切り替え時にフェードアニメーションを設定

2つ目のサンプルは1つ目のサンプルを基本として、タブコンテンツ（タブの内容）の切り替え時にフェードイン・フェードアウトしながら表示・非表示させるのと、プラグイン呼び出し時に特定のプロパティを変更することで、タブの切り替えアクションを従来のマウスの「click」（クリック）から「mouseover, mousemove」（マウスオーバーとマウスムーブ）に、そして最初から開いているタブの位置変更などをしてみます。

■■■■　JSコード

//script_fade.js
…省略…
  
    var _$obj = $(this.get(0)),
    _s = $.data( $(this), setting ),
    _p = {
      tabs: _$obj.find('li'),
      tabCn: _$obj.find(_s.tabContentsContainer),
      tabCnHeight: function(){
        var _$cns = _p.tabCn.children(),
        _len = _$cns.length,
        _hi = 0;
        while(_len > 0){
          _hi = Math.max( _hi, _$cns.eq(--_len).height());
        }
        return _hi + 40;
      },
      current: _s.current,
      isAnimate: false
    };

…省略…

    // タブコンテンツの非表示処理
    function hideTabContent(_current){

      var _$target = _p.tabCn.children().eq(_current);
      _p.isAnimate = true;
      tabChangeCurrent(_current);
      _$target.css({
        position: 'ablsolute'
      }).animate({
        opacity: 0
      }, {
        duration: 500,
        complete: function(){
          hideComplete(_$target);
        }
      });

      function hideComplete(_$target){
        _p.isAnimate = false;
        _$target.css({
              left: 0,
              opacity: 0,
              display: 'none',
              position: 'relative'
            });
      }
    }

    // タブコンテンツの表示処理
    function showTabContent(_t){

      var _$target = _p.tabCn.children().eq(_t);
      _p.isAnimate = true;
      tabChangeCurrent(_t);

      _$target.css({
        display: 'block'
      }).animate({
        opacity: 1
      }, {
        duration: 500,
        complete: function(){
          showComplete(_$target);
        }
      });

      function showComplete(_$target){

        _p.isAnimate = false;
        _$target.css({
          display: 'block',
          position: 'relative',
          opacity: 1
        });

      }
    }

    // クリックされたタブをカレント（現在）のタブに変更する
    function tabChangeCurrent(_t){
      _p.tabs.eq(_t).toggleClass(_s.currentSelector);
    }

  }

  // オリジナルプラグインの有効化
  // クリック、フェードタイプ
  $('#tabContainer2').jQdmtab();

  // オリジナルプラグインの有効化：
  // マウスオーバー、フェードタイプ、最初に2つのタブを開く
  $('#tabContainer3').jQdmtab({
    tabEventAction: 'mouseover, mousemove',
    current: 1
  });

}(document, jQuery));

今回は以上になります。

書籍の方ではjQueryプラグインについての基本的な設定などについても紹介しております。

次回はユーザビリティを向上として、マウスがあたった際に入力やリンク先のヒントを表示させるツールチップの作成について取り上げたいと思います。

『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

作成したサンプルや本の紹介はこちらをご覧ください。

2014/10/22

●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！

Profile
【ハヤシユタカ】2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より教鞭をとる。2004年からは、デジタルハリウッド大学大学院、明治大学大学院非常勤講師を歴任。2012年からはデジハリオンラインスクールにてWEB関連講座のeラーニング教材の開発に携わり、会社・自宅のPCからいつでも「HTML5」「WordPress」を学べる講座を担当。2013年御苗場Vol12.横浜にて「The Zoological Garden ～言葉のない対話～」エプソン賞受賞。

こちらの連載もあわせてご覧ください
●WordPressでブログでなくビジネスサイトをつくろう：http://www.mdn.co.jp/di/articles/2782/
●ゼロからはじめるHTML5でのサイト制作：http://www.mdn.co.jp/di/articles/2605/
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/

【著書・共著】
●現場でかならず使われている jQueryデザインのメソッド (2014/4/25)
●HTML5デザイン仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック (2014/3/24)
●現場で役立つCSS3デザインパーツライブラリ (2013/5/17)
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしいスタイルシートデザインの基本原則(2012/5/25)