小粋空間  -  a cheap joke and a play on words site

jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法

jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法を紹介します。

１．jQuery UI Tabsについて

基本情報として、jQuery UI Tabsでタブ切り替えを行う方法については「jQuery UI Tabsを使ってタブを実装する」を参照してください。

サンプル

２．hashchangeプラグインについて

jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にするには、hashchangeプラグインを利用します。

hashchangeプラグインの基本的な設定方法については「jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）」を参照してください。

３．jQuery UI Tabsでhashchangeプラグインを利用する

２項のリンク先の説明ではjQuery UI Tabsでhashchangeプラグインを利用する方法が不明なため、本エントリーで解説します。

サンプルも作りましたので、タブをクリックしたあとブラウザの「戻る」「進む」ボタンをクリックしてみてください。

サンプル

変更前後のソースコードは次のとおりです。

変更前のソース（抜粋）

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#tabs').tabs({
        selected: 2,
        fx: { opacity: 'toggle', duration: 300 },
    });
});
</script>
<div class="..." id="tabs">
  <ul class="...">
    <li class="..."><a href="#tabs-1">First</a></li>
    <li class="..."><a href="#tabs-2">Second</a></li>
    <li class="..."><a href="#tabs-3">Third</a></li>
  </ul>
  …後略…

変更後のソース（抜粋：赤色は追加部分）

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script src="jquery.ba-hashchange.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#tabs').tabs({
        select: function(event, ui) {
                    location.hash = ui.tab.hash;
                }
    });
    $(window).hashchange(function(){
        var index = location.hash.match(/#tabs-(\d)/);
        var number = index ? index[1] - 1 : 2;
        $('#tabs').tabs({
            selected: number,
            fx: { opacity: 'toggle', duration: 300 },
        });
    });
    $(window).hashchange();
});
</script>
<div class="..." id="tabs">
  <ul class="...">
    <li class="..."><a href="#tabs-1">First</a></li>
    <li class="..."><a href="#tabs-2">Second</a></li>
    <li class="..."><a href="#tabs-3">Third</a></li>
  </ul>
  …後略…

以下、解説です。

jQuery UI Tabsでのタブ切り替えではlocation.hashが書き換わらないため、selectオプションを使って強制的にlocation.hashを設定します。

    $('#tabs').tabs({
        select: function(event, ui) {
                    location.hash = ui.tab.hash;
                }
    });

そして、location.hashのイベントハンドラを次のように実装します。

    $(window).hashchange(function(){
        var index = location.hash.match(/#tabs-(\d)/);
        var number = index ? index[1] - 1 : 2;
        $('#tabs').tabs({
            selected: number,
            fx: { opacity: 'toggle', duration: 300 },
        });
    });
    $(window).hashchange();

hashchangeイベントハンドラの中で、どのタブがクリックされたかを知るために、まずlocation.hashに設定された「#tabs-x（xは数字）」からmatchメソッドを使って数字の部分だけを抽出し、それを変数numberに保存します。

        var index = location.hash.match(/#tabs-(\d)/);
        var number = index ? index[1] - 1 : 2;

例えば「#tabs-2」のタブがクリックされた場合、変数numberには「1」が設定されます。indexが得られなかった場合（つまり最初にページを開いた状態）は初期値の「2」を変数numberに設定します。

あとは、変数numberをjQuery UI Tabsのselectedオプションに設定して実行します。

        $('#tabs').tabs({
            selected: number,
            fx: { opacity: 'toggle', duration: 300 },
        });

なお、変更前のソースにあった、

        selected: 2,
        fx: { opacity: 'toggle', duration: 300 },

の2行は削除しています。

理由はlocation.hashイベントハンドラ内部から実行するjQuery UI Tabsと処理が重複するためです。

４．参考サイト

参考サイトは以下です。ありがとうございました。

changing location.hash with jquery ui tabs