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

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

Posted at March 25,2013 12:03 AM
Tag:[jQuery, Plugin, Tab]

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

1.jQuery UI Tabsについて

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

サンプル
jQuery UI Tabsのサンプルページ

2.hashchangeプラグインについて

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

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

3.jQuery UI Tabsでhashchangeプラグインを利用する

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

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

サンプル
jQuery UI Tabsのサンプルページ

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

変更前のソース(抜粋)

<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と処理が重複するためです。

4.参考サイト

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

changing location.hash with jquery ui tabs
関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)