透過pjax實現無刷新翻頁(相容新版jquery)_jquery

pushState是一個可以操作history的api，該api的介紹和使用請見這裡：http://www.welefen.com/use-ajax-and-pushstate.html

目前已經有http://github.com/, http://plus.google.com, http://www.welefen.com 等網站已經使用。

pjax是對ajax pushState的封裝，讓你可以很方便的使用pushState技術。

同時支援了快取和本地存儲，下次訪問的時候直接讀取本地數據，無需在次訪問。

並且展現方式支援動畫技術，可以使用系統自備的動畫方式，也可以自訂動畫展現方式。

關於pjax這裡就不多介紹了，簡單易用，輕鬆地實現部分刷新，告別鏈接帶來的閃爍。
之前看過pjax並實現了demo，還寫了篇筆記，不過jquery 1.9把live()方法刪掉了，新版pjax也隨之換了用on()方法實現，最近項目有用到，所以了解了新的使用方法，這裡也做一個新的筆記。

環境：
jquery 1.10.2 下載
jquery.pjax.js 下載

使用方法：
監控所有class為pjaxlink的鏈接，採用pjax更新鏈接頁面中id為ToInsert的容器內容到本頁中id為Content的容器中。若取得內容時間超過5秒，則直接跳轉：

複製程式碼 程式碼如下:

$(document).pjax('a.plinkx('a.plinkx' , '#Content', {fragment:'#ToInsert', timeout:5000});

使用實例：
原始頁面是透過跳轉的翻頁，我在不改變頁面內容的前提下，使用pjax監控翻頁鏈接，僅更新列表（保證列表容器是分頁容器的父節點）的內容。

複製程式碼 程式碼如下:

if ($.support.pjax) {
//遍歷所有分頁容器
    $('.pagercontainer').each(function(){
        //取得清單容器    / /取得清單容器的ID
        var listcontainerid=$listcontainer.attr('id');
        x(' #' listcontainerid ' .pagercontainer a', '#' listcontainerid, {fragment:'#' listcontainerid, timeout:5000});
    });
   function() {
        //在向pjax發送請求時，顯示loading動畫層
        $('#loading'). 'pjax:complete', function() {
        //在pjax處理完成後，隱藏loading動畫層
        //由於速度快導至loading層閃爍，影響毫秒延遲
        setTimeout(function(){$('#loading').hide()},500);
    });
}


}


}

}}^