ホーム サンプルコード一覧 2. History Back Tab

2. History Back Tab

実現される機能

タブナビゲーションを実現します。
タブをタップするたび、ページのhashが切り替わります。
このhashを利用し、タブの表示切り替えを行うことで、別のページへ遷移し、戻るボタンで戻った際でも、最後に開いていたタブの状態を保持します。

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

基本デモ

単純な構造のサンプルです。
タブ内にあるリンクをクリックしたあと、ブラウザの戻るボタンを押し、
タブの状態が保持されいてることを確認してみてください。

組み込みデモ1 - 小規模Webサイト

タブを中心のナビゲーションとした、小規模なWebサイトをイメージしたデモです

組み込みデモ2 - 設定画面

Webアプリケーションの設定画面をイメージしたデモです。

組み込みデモ3 - フォルダ一覧/お気に入り一覧

フォルダやお気に入りを一覧する画面をイメージしたデモです。

使用手順

1. 依存ライブラリの読み込み

History Back Tabが依存する、以下のライブラリを読み込みます。

<script src="[yourDirectoryHere]/jquery.min.js"></script>
<script src="[yourDirectoryHere]/eveeve.min.js"></script>
<script src="[yourDirectoryHere]/jquery.transit.min.js"></script>
<script src="[yourDirectoryHere]/jquery.tabify.min.js"></script>

2. タブを配置するための要素を用意

ページ内に、タブを配置するための要素を用意します。

<div class="tabset" id="tabset1">
  <div class="tabs">
    <a href="#/tabA" class="tab tab-active">A</a>
    <a href="#/tabB" class="tab">B</a>
    <a href="#/tabC" class="tab">C</a>
  </div>
  <div class="tabcontentwrapper">
    <div data-tabify-id="/tabA" class="tabcontentdiv tabcontentdiv-active">
      tab A の内容
    </div>
    <div data-tabify-id="/tabB" class="tabcontentdiv">
      tab B の内容
    </div>
    <div data-tabify-id="/tabC" class="tabcontentdiv">
      tab C の内容
    </div>
  </div>
</div>

タブを実現するためのHTMLは、「タブ部分」と「コンテンツ部分」に分かれています。

タブ部分(.tabs)については、上記のa要素がタブ一つを表し、タブの変更をトリガーするボタンとなっています。ahrefには、対応するhash値を指定します。

タブ部分である、.tabcontentwrapperの中には、.tabcontentdivを、タブの数ぶんだけ並べます。そして、それぞれに、タブ部分にて指定したhash値を、data-tabify-id属性として付加します。

一つ目のタブのclass属性にtab-activeを追加し、対応する一つ目の.tabcontentdivのclass属性値にtabcontentdiv-activeを追加します。

これで、タブのクリックに対応し、URLのhashが更新され、対応するコンテンツも切り替わるようになります。

3. jQuery.tabifyを適用

jQuery.tabifyを、以下のように適用します。

$(function() {

  var $tabset = $('#tabset1');

  $tabset.tabify({

    // セレクタ群
    selector_tab: '.tab',
    selector_contentwrapper: '.tabcontentwrapper',
    selector_content: '.tabcontentdiv',

    // 現在地表示用クラス
    tab_activeClass: 'tab-active',
    content_activeClass: 'tabcontentdiv-active',

    // その他オプション
    useFade: true,
    useTransition: true,
    useHashchange: true

  });

  // リサイズ時に高さを再調整
  var instance = $tabset.data('tabify');
  $(window).bind('resize', function() {
    instance.adjustWrapperHeight();
  });

});

上記、「セレクタ群」には、各要素のセレクタを指定します。「現在地表示用クラス」には、該当のタブが現在地表示になった場合に付加されるclass属性値を指定します。

「その他オプション」はそれぞれ以下の様な意味を持ちます。

useFade
タブの切替時にフェードアニメーションをするか否か
useTransition
CSS Transitionsを用いてフェードアニメーションを行うか否か(この機能を使わない場合、Transitを読み込む必要はありません)
useHashchange
タブ切り替えにhashchangeを使用するか否か

タブの数を変更したい場合

タブの数を4つにしたい場合は、例えば以下のようなHTMLを書きます。

<div class="tabset" id="tabset1">
  <div class="tabs">
    <a href="#/tabA" class="tab tab-active">A</a>
    <a href="#/tabB" class="tab">B</a>
    <a href="#/tabC" class="tab">C</a>
    <a href="#/tabD" class="tab">D</a>
  </div>
  <div class="tabcontentwrapper">
    <div data-tabify-id="/tabA" class="tabcontentdiv tabcontentdiv-active">
      tab A の内容
    </div>
    <div data-tabify-id="/tabB" class="tabcontentdiv">
      tab B の内容
    </div>
    <div data-tabify-id="/tabC" class="tabcontentdiv">
      tab C の内容
    </div>
    <div data-tabify-id="/tabD" class="tabcontentdiv">
      tab D の内容
    </div>
  </div>
</div>

より細かい設定方法

タブをより自由に使いたい場合は、本スケルトンが依存する jQuery.tabify を直接ご利用ください。