maro-z.com

jQuery historyプラグインが素敵だったのでサンプル作成

2008.7.1 火曜日

Ajaxでタブ切り替え+リスト表示+ページ切り替えというページを作っていて、
タブやページを切り替えた状態を、アンカーリンクで直接指定できるようにはしてあったんだけど、

「これ、historyの履歴に入れられないかなぁ」
と思って検索してたら、素敵なjQueryプラグインを発見。

DLページにサンプルがあって、そちらのソースで充分把握できるほど使いやすいプラグインですが、
実働に近い感じのサンプル作ってみたので、置いておきます。

Ajaxで、タブ毎に別のcsvファイルを読み込んでリスト表示。
タブ切り替えをhistoryに入れてブラウザの「戻る」「進む」に対応。

ページ切り替え機能を追加して、ページ毎にhistoryに残るようにしました。

※予め、アンカーリンク(URLの#以降)を用いて状態が復元できるようにしておく必要があります。

onLoadや$(document).ready等で、

$.historyInit(function);
//function = コールバック関数

を実行して初期化しておき、
アンカーリンクの入ったaタグに、clickイベントで

$.historyLoad(hash);

hash = アンカー文字列
をバインド。

上記のサンプルでは、こうなっています。

コールバック関数は、アンカーの文字列を引数として受け取り、
その文字列に応じて状態を再現するように作ってておけばOK。

上記のサンプルでは、
#chevrolet
#bmw
#aston
で、タブの状態を再現し、

ペ－ジ切り替えがある際は、-(ハイフン)でページ番号を繋いで、
#chevrolet-2
等というアンカーにして、
もしアンカーに-(ハイフン)が入っていたら、分割してタブとページの両方を再現するようになっています。