通過pjax實現無重新整理翻頁

來源:互聯網
上載者:User

 這篇文章主要介紹了通過pjax實現無重新整理翻頁,相容新版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.pjaxlink', '#Content', {fragment:'#ToInsert', timeout:5000});  使用執行個體:原始頁面是通過跳轉的翻頁,我在不改變頁面內容的前提下,使用pjax監控翻頁連結,僅更新列表(保證列表容器是分頁容器的父節點)的內容。  代碼如下:if ($.support.pjax) {    //遍曆所有分頁容器    $('.pagercontainer').each(function(){        //取得列表容器        $listcontainer=$(this).parent();        //取得列表容器的ID        var listcontainerid=$listcontainer.attr('id');        //用pjax監控所有分頁連結並定義pjax來實現更新        $(document).pjax('#'+listcontainerid+' .pagercontainer a', '#'+listcontainerid, {fragment:'#'+listcontainerid, timeout:5000});    });    $(document).on('pjax:send', function() {        //在pjax發送請求時,顯示loading動畫層        $('#loading').show();    });    $(document).on('pjax:complete', function() {        //在pjax處理完成後,隱藏loading動畫層        //由於速度太快會導到loading層閃爍,影響體驗,所以在此加上500毫秒延遲        setTimeout(function(){$('#loading').hide()},500);    });} 
相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。