2013.12.09

URLの#(ハッシュ)変更時にイベントをつける!jQuery hashchange eventプラグイン

posts_photo
jQuery hashchange event

画面遷移のWebサイトを作るときなどに便利そうなjQueryプラグインをご紹介。“jQuery hashchange event”は#(ハッシュ)を設定したリンクを押したときにJSで任意のイベントをつけられるプラグインです。
URLにハッシュが付いたり変更されたりしたときに反応するので、ブラウザの戻る・進むボタンを押した時にも反応してくれます。

実装するには公式サイトからダウンロードするjquery.ba-hashchange.jsとjQueryを読み込み、以下のように設定します。

/*Javascript*/
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.ba-hashchange.js"></script>
<script type="text/javascript">
$(function(){
  $(window).hashchange( function(){
    // ここにハッシュが変更されたときに動かしたいイベントを書きます。
    alert( location.hash );
  })
  // ページのロード時にhashchangeを動かします。
  $(window).hashchange();
});
</script>

実際に使う時はハッシュ変更時のイベントを考えたり、他にもいろいろ書く必要がありますが、変更したという動作を簡単に感知出来るのは何かと便利だと思います。

より詳しい解説や、デモは下記公式ページで確認してみてください。では!


記事のタグ一覧:,

スポンサードリンク

関連記事

カテゴリー内のおすすめ記事