`defunkt/jquery-pjax` の使い方メモ

  • 投稿日
  • 更新日
  • 著者 アルム＝バンド
  • カテゴリー jQuery

defunkt/jquery-pjax に触れる機会があったので軽くメモしておきます。

なお、今回は import なし、従来のやり方に準じた形での導入とします(なので falsandtru/pjax-api: The second generation PJAX for advanced web frameworks. や barba.js ではなく defunkt/jquery-pjax: pushState + ajax = pjax で)。

インストールは npm なり yarn なりで追加して、 /node_modules/jquery-pjax/jquery.pjax.js を concat なりして script タグで読み込ませます。

その上で導入上の注意点が以下。

  • 各リンクが相対パスだとブラウザの戻る・進むの際に上手く動作しないので絶対パス指定にするにする
    • 絶対パスにすると Browsersync が open: 'external' の際(IP指定でのアクセス)だと Font Awesome のフォントファイルがCORSで引っかかるので Browsersync にオプションを足して対応する
    • 参考: Browsersync で CORS 対応する
  • 外部リンクへのPjaxは防止すること。例えば、アンカーリンクとクラス pjax_external のリンクは除外する、という条件ならば $(document).on('click', 'a:not([href^="#"]):not(.pjax_external)', function (e) { /* 処理 */ }); のように document に click イベントをバインドする
  • 遷移時のアニメーションエフェクトとアンカーリンク
    • 遷移時のアニメーション前にアンカーリンクへスクロール値をセットしようとすると上手く動かない
      • リンククリックではスクロール値が0になり、ブラウザの戻る・進むではスクロール値はセットされるが scrollTop で動かない( fadeIn や fadeOut アニメーションが動いてしまう)
        • fadeIn メソッドのコールバック関数で scrollTop を実行するとフェードアニメーション終了後にガクッと動くので違和感(バグっぽく見えてしまう)
          • fadeIn アニメーションの後にスクロールアニメーションすれば良さげ
    • jQuery の .css() メソッドの第二引数は .css で当てる値に使用されるのでコールバックではなさそう。なので、今回は不適。

参考

defunkt/jquery-pjax

jQuery

Pjax

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧