Help us understand the problem. What is going on with this article?

pjaxまとめとメモ

More than 1 year has passed since last update.

pjaxまとめとメモ

pjaxは2種類ある

pjaxにはdefunktfalsandtruの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も自動的に取得してくれる。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away