jQuery historyプラグインが素敵だったのでサンプル作成
2008.7.1 火曜日
Ajaxで表示しているページに、ブラウザの「戻る」「進む」とブックマークを対応させるjQueryプラグイン
Ajaxでタブ切り替え+リスト表示+ページ切り替えというページを作っていて、
タブやページを切り替えた状態を、アンカーリンクで直接指定できるようにはしてあったんだけど、
「これ、historyの履歴に入れられないかなぁ」
と思って検索してたら、素敵なjQueryプラグインを発見。
history plugin
作者様の記事：みかログ: Ajaxと戻るボタン・ブックマーク
DLページにサンプルがあって、そちらのソースで充分把握できるほど使いやすいプラグインですが、
実働に近い感じのサンプル作ってみたので、置いておきます。
Ajaxで、タブ毎に別のcsvファイルを読み込んでリスト表示。
タブ切り替えをhistoryに入れてブラウザの「戻る」「進む」に対応。
ページ切り替え機能を追加して、ページ毎にhistoryに残るようにしました。
使い方
※予め、アンカーリンク(URLの#以降)を用いて状態が復元できるようにしておく必要があります。
onLoadや$(document).ready等で、
$.historyInit(function);
//function = コールバック関数
//function = コールバック関数
を実行して初期化しておき、
アンカーリンクの入ったaタグに、clickイベントで
$.historyLoad(hash);
hash = アンカー文字列
をバインド。
上記のサンプルでは、こうなっています。
- $(function(){
- $.historyInit(chgView);
- $('a.tab').click(function(){
- var hash = this.href;
- hash = hash.replace(/^.*#/, '');
- $.historyLoad(hash);
- this.blur();
- return false;
- });
- });
コールバック関数は、アンカーの文字列を引数として受け取り、
その文字列に応じて状態を再現するように作ってておけばOK。
上記のサンプルでは、
#chevrolet
#bmw
#aston
で、タブの状態を再現し、
ペ－ジ切り替えがある際は、-(ハイフン)でページ番号を繋いで、
#chevrolet-2
等というアンカーにして、
もしアンカーに-(ハイフン)が入っていたら、分割してタブとページの両方を再現するようになっています。