ノンサーバーサイドでpjaxを使う

jquery.pjaxを利用した遷移を作ろうとして、いろいろ調べていたら、RubyやらPHPやらのサーバーサイドのプログラム含めた開発記事はそこそこヒットするんだけど、サーバーサイド使わずに静的ファイルだけでも使えないのかと思って調べてみました。

結果から言うと可能です。以下の書き方で出来ます。

まずはHTMLにjqueryjquery.pjaxを読み込む

<script src="./js/jquery-1.8.1.min.js" charset="utf-8"></script>
<script src="./js/jquery.pjax.js" charset="utf-8"></script>

次にJavaScriptを記述

//pjaxというクラス付きのaタグをクリックした時に#mainを#mainで置き換える
//$('body').pjax('a.pjax', '置換先セレクタ', {fragment: '読み込んだHTMLから抽出する部分のセレクタ'})
$('body').pjax('a.pjax', '#main', {fragment: '#main'})

こんな感じ。
書き方が新しくなっているようで、bodyに関してはよくわからずなので、もうちょい調べる予定。
取り急ぎメモ!

https://github.com/defunkt/jquery-pjax