jQuery hashchange event プラグインの実装方法をお教えいただけますでしょうか?

ほぼ初心者で具体的にご教授いただけると嬉しいです。
クライアントの要望で急を要しており、ご存知の方お願い致します。

下記のように紹介しているサイトはあるのですが、実装方法がわからず困っております。
http://c-brains.jp/blog/wsg/11/04/28-123445.php
http://www.torounit.com/blog/2011/01/21/523/
http://kaelab.ranadesign.com/blog/2011/01/javascript-6.html

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/07/22 20:14:36
  • 終了:2011/07/29 20:15:06

回答(1件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/07/23 10:45:22

「ほぼ初心者」とのことですので、本当にそのつもりで解説してます。けしてバカにしているわけではありませんので、お気を悪くなされないで下さい。

 

ここにデモがありますので、それで説明しますね。

http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/

 

まず、test1を押してください。

すると、titleが"The hash is test1"と変わり、test1が緑になったと思います。

次に、test2を押してください。

すると、titleが"The hash is test2"と変わり、test1が元に戻り、test2が緑になります。

ここからが本番なのですが、次に「戻る」を押してみて下さい。

すると、titleが"The hash is test1"と変わり、test2が元に戻り、test1が緑になります!

これがjQuery hashchange eventの効果です。

 

さてコードを見てみましょう。

$(function(){
  $(window).hashchange( function(){
    var hash = location.hash;
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
    $('#nav a').each(function(){
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })
  $(window).hashchange();
});

まず、1行目。これはloadイベントハンドラ、つまりページを読み込み終わった時に実行するコードを書くものです。内容は2~10行目です。

では、loadイベントが起きたときには何が実行されるかというと、2つです。

1つは2行目。hashchangeイベントハンドラの定義です。ハッシュが変わったときに実行するコードが書いてあります。内容は3~8行目です。

もう1つは10行目。これはhashchangeイベントトリガです。強制的にhashchangeイベントを起こすものです。これは必要な1行なのですがあとで解説します。

 

さて、準備は整いました。ではhashchangeイベントが起きた時には何が実行されるのでしょうか。

3行目、変数hashにURLのハッシュ部分を入れます。

4行目、titleを"The hash is 【ハッシュ名】"に変更します。

5行目、'#nav a'に該当するもの、ここでは'test1'~'test4'ですが、それぞれにfunction以下を実行します。内容は6,7行目です。

 6行目、変数thatに'#nav a'に該当するものの内、n個目を入れます。1回目は'test1'、2回目は'test2'……という感じです。

 7行目、that('test1'~'test4'のどれかが入っています)のhref属性がhashだった場合、class属性を'selected'に、そうでないならclass属性'selected'を外します。CSSによって緑色に変化するのは、この行によります。

以上です!

 

最後に10行目の補足ですが、この行はリロードされた時のためにあります。#test1の時にリロードされるとhashchangeイベントがトリガされ、titleを変えtest1を緑に変えます。

 

 

 

さていよいよ、どのように実装するか、ですが。

$(window).hashchange( function(){
  var hash = location.hash;
  ...
})
$(window).hashchange();

上記コードを$(function(){})の中に入れ、...の部分に適切なコードを書いて下さい。

適切なコードとは何か、はご自分で考えるしかないです。

#hogeのURLの時には何が表示されているのか、まず要件を定めるところから始めて下さい。

 

 

 

ご質問があれば追記でご回答いたします。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません