人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: shima_wmc
●カテゴリ:ウェブ制作
✍キーワード:jQuery クライアント サイト プラグイン 初心者
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Lhankor_Mhy

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

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

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の時には何が表示されているのか、まず要件を定めるところから始めて下さい。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ