jquery.hashchange.jsを使ってDOMの状態記録？的なことをする

パララックスサイトとか、スライダーを使うようなサイトを作っている場合、
jsだから戻るボタン押したりとかリロードをした場合、最初に戻るという残念な事が多い。
そういうのって地味にうわぁってなったりするしあまり良くないので、
じゃあそういうのってどうしたらいいのっていうのを解決する方法を書いてみる。

で、解決するために使うのはjquery.hashchange.jsというjQueryライブラリ。

このjquery.hashchange.jsを使うと何が出来るかっていうと、
URLに#がついた瞬間というイベントを取る事が出来るようになる。
readyイベントよりも後ろで発生する。

ちなみにURLに#hogeなどとついてるのはハッシュと呼ばれていて、
よくアンカーとかそういったものに使われているもの。
で、多分ごちゃごちゃ言うよりも書いた方が早いと思うので、使い方。

//head部分
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery.hashchange.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  //hashchangeした時に割り当てたいfunctionを定義
  $(window).hashchange(function(e){
    var hash = location.hash; //URLについてる#を含む#以下
    alert(hash);
  });

  //ページを読み込んだときにハッシュがついてる場合にイベントを起こすために必要
  $(window).hashchange();
});
</script>
</head>

//リンク部分
<a href="#hoge">リンク1</a>
<a href="#foo">リンク2</a>

ということでリンク1をクリックすると#hogeとアラートが出て、
リンク2をクリックすると#fooとアラートが出てくる。

ちなみに注意点として、jquery.hashchange.jsは$.browserを使っていて、
jquery1.9.0からは$.browserが廃止されているのでエラーが出てしまって使う事が出来ない。
だから使うならばjquery.hashchange.jsを改造するか、jquery1.8.xにとどめておく必要あり。

■使い道
・パララックスでページの遷移をした際
・Ajaxの状態取得を、クリックではなくhashchangeで
・隠しテキストボックスを表示させたり閉じたりするとき
といった感じで使ってあげると親切設計的な感じになるんじゃないかと。

ということでDOMを変えた際にハッシュをちゃんとつけたりしておくと、
ブラウザで戻るとかそういった状態記録？的なものが出来るからかなり便利。
特にパララックス系のサイトに使うとユーザビリティ的な何かがよくなると思う。