82mou
11/16/2016 - 8:21 AM

falsandtru/jquery-pjax(v2.42.0)の使い方

falsandtru/jquery-pjax(v2.42.0)の使い方

##URL http://neganin.com/blog/web/jquery-pjax/
http://chibinowa.net/notebook/js/pjax-fragment.html

コード

index.html

<a href="./news.html">ボタン</a>
<div id="js-container">
<!-- ここが塗り変わる -->
</div>

news.html

<div id="js-container">
<!-- ここを差し込む -->
</div>

javascript

<script src="/lib/jquery.pjax.min.js"></script>
<script>
$.pjax({
  area: '#js-container', //入れ替えるDOM
  wait: 1000, //nミリ秒待って通信開始
  link: 'a:not([target]), a:not([href="#"])',
  callback: function(e) {
    console.log('end'); //通信完了時に実行
  }
});
$document.on('pjax:fetch', () => {
  console.log('pjax:fetch'); //通信開始前
});
$document.on('pjax:DOMContentLoaded', () => {
  console.log('pjax:DOMContentLoaded'); //通信完了時に実行(callbackの後)
});
$document.on('pjax:render', () => {
  console.log('pjax:render'); //レンダリング
});
</script>