pjaxまとめとメモ

pjaxまとめとメモ

##pjaxは2種類ある
pjaxにはdefunktとfalsandtruの2種類ある事に注意。
それぞれ、導入方法、使い方も違う。

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

■falsandtru
https://github.com/falsandtru/pjax-api

*IE未対応

詳しい違いはこちらから
https://github.com/falsandtru/pjax-api/tree/master

##■defunktの場合

###まずはjquery.pjax.jsをインストール

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

クローンしたファイル内にあるjquery.pjax.jsをhtmlファイルに読み込む

<script src="/js/jquery.pjax.js"></script>
<script src="/js/config.js"></script>

###基本の使い方

config.js

  $.pjax({
    container : '#pjax-container', 内容を書き換える要素指定
    fragment : '#pjax-container' 取得したい要素指定
  });

fragmentで取得したい要素を明示的に設定をしないと、
動的に書き換えられたmetaが、body内に追加されてしまう。

###jsを再読み込み

ページ遷移後はjsが動かないので、
インラインでscriptを書くか、jsを再読み込みさせる。

$(document).on('pjax:complete' ,function(){
	$.getScript('script', function(){
		読み込み後の処理
	})
});

###meta
タイトルは動的に変更され、
その他ogp周りなどのmetaは各ページごとに設定しておけばOK

###loding処理
簡単なloding処理はイベントを使って追加出来る。
詳しいイベント一覧はこちら
https://github.com/defunkt/jquery-pjax#events

###ページ遷移アニメーション
ページ遷移アニメーションを追加する場合、$.pjaxでの書き換え処理のタイミングを制御する必要がある。
簡単な処理はanimateのcallbackでも良いが、複雑なアニメーション、タイミングを制御したいのでpromiseを使って制御する。
詳しいイベント一覧はこちら
https://github.com/defunkt/jquery-pjax#events

###ブラウザバック
ブラウザの戻る、進むボタンを使うにはリンクを絶対パスにする

###ページ遷移後の処理
ページ遷移時animationの処理をclassの付け替えで制御している場合、
遷移後に処理を削除しておくこと。
詳しいイベント一覧はこちら
https://github.com/defunkt/jquery-pjax#events

##■falsandtruの場合

###まずはmodulesのインストール

npm install pjax-api spica

pjax-api、spicaそれぞれのdistに入っているjsをhtmlファイルに読み込む

<script src="/js/pjax-api.js"></script>
<script src="/js/config.js"></script>

###基本の使い方

config.js

var Pjax = require('pjax-api').Pjax;
new Pjax({
  areas: [
    // try to use the first query.
    '#header, #primary',
    // fallback, retrying with the second query.
    '#container',
    // fallback.
    'body'
  ]
});

###jsを再読み込み

ページ遷移後はjsが動かないので、
インラインでscriptを書くか、jsを再読み込みさせる。

$(document).on('pjax:ready' ,function(){
	$.getScript('script', function(){
		読み込み後の処理
	})
});

###meta
metaも自動的に取得してくれる。