Jquery pjax プラグイン

pjax.jsを使った簡単なサンプルを作ってみた



ページ遷移時の全部の要素を再読込・表示するのではなく、更新する部分だけを再描画する事ができるようになるpjax.js

導入する際の注意点はpjax.jsは複数の系統バージョンがあること
これに気づかないと、命令文が違って動かない・サンプルが動かないなどで躓いてしまう

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

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

基本的には「falsandtru」の方が機能が多いと思うけど、ぐぐるで出てくる情報は「defunkt」の方が多いのかもしれない
そして、どちらのpjaxで作っているのか表記がないものが多いので、試した時に読み込んでいるpjax.jsと違うとエラーがでる

defunkt
$.pjax({
  container: '',
});

falsandtru
$.pjax({
   area : ''
});

最低限必要なコードは書き換える場所を指定する部分だけでpjax.jsは動く
「defunkt」はcontainerなのに対し「falsandtru」はareaとなっていて、ここで動かない時はpjax.jsの種類を確認すると良いと思う

最初に躓いて以降は「falsandtru」しか使っていないので「falsandtru」だけの情報としてメモしていきます

pjax.jpの読み込み
<script type="text/javascript" src="jquery.pjax.js"></script>

pjaxの基本動作設定
$.pjax({
//更新する場所
   area : 'idやclass'.

//実行トリガーとなるリンク
   link : 'idやclass',

//遷移時のスクロールポジション
   scrollTop: false
});

area：複数指定も可能
   area : '#target1,#target2'

link：
//a:not([target])でtarget属性が指定されていないリンク全て
   link: 'a:not([target])'

scrollTop:
falseにすると読み込み後もスクロール位置が変わらなくなる


シンプルなサンプルを作りました
pjaxサンプル

1ページ目
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>1ページ目 | pjaxサンプル</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pjax.js"></script>
</head><body>
<h1>pjaxサンプル</h1>
<a href="pjax1.html">ページ1へ</a>
<a href="pjax2.html">ページ2へ</a>
<div id="contents">他の部分はそのままに、この部分を変更したいですね</div>

<script type="text/javascript">
$.pjax({
   area : '#contents'
});
</script>

</body></html>

2ページ目
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>2ページ目 | pjaxサンプル</title>
</head><body>
<div id="contents">２ページ目になりました</div>
</body></html>

サンプルの為、1ページ目の要素を殆ど利用するので2ページ目は更新する部分と必要最低限の部分だけとしています
その上でページ遷移しても記述されていない部分も残っていれば成功ですね

必要最低限というのはブラウザでの再読込時文字化けとかしない程度のものですが、実際の運用は再読込が行われた時用に変更しない部分のコードも必要になりますね

head内のtitleはデフォルトで更新対象となっています
meta属性も変更できるので、そのあたりはまた別記事でー

pjaxはページ移動をしているのではなくリンク先のページの変更部分を読み込んで更新している感じですね

URLもHeaderで変更されますが、検索エンジン的にはどうなのか
調べると、googleは推奨している技術らしくOKなのかな

推奨はされていますが、URLやtitleの変更、再読込の挙動など最低限の条件は満たす必要があります

読み込み先のページ情報にtitleはきっと必要ですね

0 件のコメント :

コメントを投稿