jquery備忘録： jQuery history pluginの使い方

表題のプラグインはページ遷移せずにページの情報とブラウザの履歴を保持するというものです。
違ったらすみません。

プラグインは下記ページからダウンロード。
jQuery history plugin

jqueryが必要なので、あらかじめダウンロードしておいてください。

自分が理解できたやりかたを説明します。

参考:http://www.maro-z.com/archives/40

■やりたいこと

・クリックしたあとページが現在のページの前にフェードインする。

・ブラウザの履歴で戻るときページがフェードアウトしてもどる。

・ブラウザの履歴で進むときクリックしたときと同じようにページが現在のページの前にフェードインする。


まず、

$.history.init(zisaku);

で初期化する。

このzisakuは実行したときにする処理を記述します。
ここでいうと、ページがフェードインとフェードアウトする処理です。


以下定義例

javascript-------------------------------------------------------------

function zisaku(hash){

if(hash){
$("#hoge").load(url+" body",function (){
$("#hoge").fadeIn(500);
});
}else{
$("#hoge").fadeOut(500);
}

}
--------------------------------------------------------------javascript

$("#hoge").loadについてはここのサイトを参考にしてください。

遷移先のページのbody要素以下の要素を#hogeに読み込むようにします。

#hogeで指定したブロックがブラウザ全体を覆うようにCSSを設定します。

css---------------------------------------------------------------------

body{
width:100%;
height:100%;
}

#hoge{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}

--------------------------------------------------------------------css

body要素にもwidth:100%とheight:100%を指定します。
そうしないと子要素のheight:100%が有効になりません。


そしてクリックしたときに実行する関数を定義します。

html-------------------------------------------------------------------

<a href="#hoge" link="http://hogehoge.com">aaaaaa</a>

-------------------------------------------------------------------html

正しいやり方かどうかわかりませんが、a要素にlink属性を定義してそこに遷移後のページURLを指定します。
そして、href属性にアンカーリンク用のハッシュを指定します。


javascript-------------------------------------------------------------

$("a").bind("click",hogehoge);

var url="";
function　hogehoge(){

url=$(this).attr("link");
var hash = $(this).attr("href").replace(/^.*#/, '');
$.history.load(hash);

return false;
}

--------------------------------------------------------------javascript

a要素にクリックしたときにhogehogeを実行できるようにbindし、
先ほど指定した、link属性の値をvar urlに代入します。
同時にvar hashにhref属性のアンカーリンクの値を代入します。

そのhashを

$.history.load(hash);

のように引数に入れて$.history.loadを実行します。

ここで最初に

$.history.init(自作関数名);

で指定された自作関数がhashの値の条件によって実行されます。
return falseで通常の画面遷移を止めます。

ここまでで一応当初の目的は達成できると思います。

もしかしたらたりないところもあるかもしれませんがご容赦ください。