shimabox.netではjQuery UI TabsというjQueryのライブラリでタブを利用したシングルページっぽい感じにしています。
それで、作った時はブラウザバックとかでページ遷移した時も勝手に該当のタブを表示してくれてた様な気がしてたんですけど気づいたらそんな事は無かったんどすねぇ。。（もしかしたら最初から？）
それだと少しかっこ悪かったので、戻る/進むをした際でも該当のタブ内容が表示される様にやってみたら成功したのでその対処法を書きます。
対処法と言っても、まぁ、タイトルに書いてあるそのままなんですけどね。
- タブ押下時にURLにハッシュを付けて遷移させる
- ハッシュチェンジイベントを利用してごにょごにょする
おおざっぱに言うとこんな感じ。
jQuery UI Tabsと、jQuery hashchange eventというプラグインを使います。
ダウンロードやマークアップは以下のサイトを参考にさせて頂きました。
- jQuery UI Tabs jQuery UI Tabsを使ってタブを実装する: 小粋空間
- jQuery hashchange event Ajaxコンテンツでも手軽に「進む」「戻る」を実装できるjQuery hashchange event | バシャログ。
上記にある通りプラグインをダウンロードしてもらえれば間違いないかと思います。
では、僕なりの対応方法を順に書いていきます。
参考になるか分かりませんが…とりあえずレッツゴー！！
基本的なマークアップ
head内
<head> <!-- jQueryを読み込む --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- jquery.ui.tabs等 --> <script type="text/javascript" src="./js/jquery.ui.core.js"></script> <script type="text/javascript" src="./js/jquery.ui.widget.js"></script> <script type="text/javascript" src="./js/jquery.ui.tabs.js"></script> <!-- css ダウンロード時に選択したテーマのもの--> <link rel="stylesheet" href="./css/smoothness/jquery-ui-1.8.14.custom.css" type="text/css"> </head>
body内
<div id="tabs">
<ul>
<!--タブ li要素→a要素のhref属性にタブに紐づけるコンテンツのid属性値を設定 ※フラグメント形式(#から始める)で-->
<li><a href="#tabs_1">tabs_1</a></li>
<li><a href="#tabs_2">tabs_2</a></li>
<li><a href="#tabs_3">tabs_3</a></li>
</ul>
<!--コンテンツ タブと紐づく様にid属性値を設定-->
<div id="tabs_1">tabs_1です。</div>
<div id="tabs_2">tabs_2です。</div>
<div id="tabs_3">tabs_3です。</div>
</div>
javascript
$('#tabs').tabs();
sample1
上記マークアップだけで、とりあえず簡単に実装出来ます。
でも上の方法でブラウザバックすると、今までのタブ遷移が無視されて一気にこのページを踏む前の画面に戻ってしまいます。
タブ押下時にURLにハッシュを付けて遷移させる。
そこで、タブ押下時にページ情報というかフラグみたいのを持たせる意味でURLにハッシュを付けてみます。てか、どうやったら付けれるん？って思ったんですが、jQuery UI – Tabs Demos & Documentationを読んでなんとなく分かったのでこうしてみます。イベントを使います。
javascript
$(function(){
$('#tabs').tabs(
{
//タブが押された時に呼ばれるコールバック
select: function(event, ui) {
//ui.tabにはtab情報が詰まっている
//その中のhashをwindow.location.hashに設定する
//hashの値は押下されたタブのhash値(li要素の→a要素のhref属性に設定した値)
window.location.hash = ui.tab.hash;
}
}
);
});
お、想定通りにタブ押下時にURLにハッシュを付けて遷移させる事が出来ました。わ〜い。
ただ、これだと冒頭に書いた通り、URLは変わっても戻る/進むをした際に該当のタブ内容が表示されないんです。いくら戻っても表示される内容はそのままなんですyo。
ハッシュチェンジイベントを利用してごにょごにょする。
そこで奥さんjQuery hashchange eventの出番ですよ。これはURLのハッシュが変わった時のイベントを簡単に拾ってくれる優れものなんです。※自前でやろうとするとIE6とか7とかめんどくさいみたい
もうすでにタブ変更時にハッシュの変更は出来ているからこれと組み合わせればどうにかなると思ったんです。
そこで問題は、ブラウザバックされた時などにどうやってタブを押下された事にするかだったんですが、これもjQuery UI – Tabs Demos & Documentationを読んでみると、
.tabs( "select" , index )
なる関数が用意されてるじゃあーりませんか。
多分、このindexには該当のタブのインデックスを渡せばいいんでしょう。
んで、このjQuery UI Tabsは左のタブから0から順にインデックスがふられている様です。そこでこう書きます。
head内 jQuery hashchange event 追加
<head> <script type="text/javascript" src="./js/jquery.ba-hashchange.min.js"></script> </head>
javascript
$(function(){
$('#tabs').tabs(
{
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
}
);
});
//hashとインデックスの組み合わせ
var tabIndexs = {'#tabs_1' : 0, '#tabs_2' : 1, '#tabs_3' : 2};
$(window).hashchange(function(){
//現在のhashからインデックスの値を取得
var index = tabIndexs[window.location.hash];
//hashが無い場合は最初のタブを選択
index = index ? index : 0;
//取得したインデックスでタブをセレクト
$('#tabs').tabs("select", index);
});
sample3
Yes!これで戻る/進むをしてもきちんと該当のタブ内容が表示されました。
他にも方法は腐るほどあるんでしょうけど、とりあえずこんな感じで。
こんなんでよければ参考にしてください。他にいい方法あったら教えてください。それでは！
おまけ
ちなみに、hashに#!を付けるとgoogleにそのページがクロールされる様です。これさらなる「#!」URL批判 – karasuyamatenguの日記を見る限りあんまり好まれる使い方では無いようですが。。
あえて書くならこんな感じ？ ※これで合ってるのかな？自信無し
javascript
$(function(){
$('#tabs').tabs(
{
select: function(event, ui) {
window.location.hash = "!" + ui.tab.hash.slice(1);
}
}
);
});
var tabIndexs = {'tabs_1' : 0, 'tabs_2' : 1, 'tabs_3' : 2};
$(window).hashchange(function(){
var index = tabIndexs[window.location.hash.slice(2)];
index = index ? index : 0;
$('#tabs').tabs("select", index);
});
sample4
ざっくり書いてみたけど真似しない方がいいですよ！それでは！
