整合pjax無刷新

一：整合pjax的準備工做；

檢查你的網站是否引入1.7.0版本以上的jquery.js，若是沒有請全局引入

1.新浪CDN提速：
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js";></script>
2.下載本地化jq：
<script type="text/javascript" src="....本身寫...../jquery.js"></script>
1.7.0版本以上的纔有pushState的封裝。

二：開始整合Pjax；

1.下載pjax.js ；

2.在你喜歡的位置（最好body代碼結束前）引入pjax.js；

三：使用pjax；

編輯模版footer.php在</body>標記結束前插入：

<script>
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
</script>
這句話是什麼意思呢？--綁定本頁面非新窗口打開的全部本域連接，連接點擊以後，替換contentleft的容器的內容爲新內容contentleft，ajax超時時間8秒；

OK，由於每一個模版的替換區不一樣，修改掉contentleft容器，保存。

如今看看，是否能夠無刷新加載了？

四：解決pjax的緩衝--加入等待動畫；

pjax.js提供了兩個接口；

<div class="pjax_loading"></div>
<script>
$(document).on('pjax:send', function() { //pjax連接點擊後顯示加載動畫；
$(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax連接加載完成後隱藏加載動畫；
$(".pjax_loading").css("display", "none");
});
</script>
固然要爲pjax_loading定義css，這裏就很少說了。

五：解決pjax以後，容器中一些jq事件失效的問題；

問題好比：pjax以後多說評論框不加載，ajax評論不能提交等等問題。

問題緣由：原先容器綁定的事件被新容器替換掉了，新容器的div沒有綁定事件，因此點擊無效。

解決方法：利用pjax的加載完成回調函數，從新綁定事件。

例：

<script>
$(document).on('pjax:complete', function() {
pajx_loadDuodsuo();//pjax加載完成以後調用重載多說函數
});
function pajx_loadDuodsuo(){
var dus=$(".ds-thread");
if($(dus).length==1){
var el = document.createElement('div');
el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必選參數
el.setAttribute('data-url',$(dus).attr("data-url"));
DUOSHUO.EmbedThread(el);
$(dus).html(el);
}
}
</script>
OK，咱們發現多說能夠正常載入了。

六：所有代碼彙總一下，就是這樣：

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js";></script> <script type="text/javascript" src="你的域名/pjax.js"></script><div class="pjax_loading"></div><script>$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});$(document).on('pjax:send', function() { //pjax連接點擊後顯示加載動畫；$(".pjax_loading").css("display", "block");});$(document).on('pjax:complete', function() { //pjax連接加載完成後隱藏加載動畫；$(".pjax_loading").css("display", "none");pajx_loadDuodsuo();});function pajx_loadDuodsuo(){var dus=$(".ds-thread");if($(dus).length==1){var el = document.createElement('div');el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必選參數el.setAttribute('data-url',$(dus).attr("data-url"));DUOSHUO.EmbedThread(el);$(dus).html(el);}}</script>