欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

通過pjax實現(xiàn)無刷新翻頁(兼容新版jquery)

 更新時間:2014年01月31日 19:10:29   作者:  
這篇文章主要介紹了通過pjax實現(xiàn)無刷新翻頁,兼容新版jquery,使用心得方法,需要的朋友可以參考下

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

目前已經(jīng)有http://github.com/, http://plus.google.com, http://www.welefen.com 等網(wǎng)站已經(jīng)使用。

pjax是對ajax + pushState的封裝,讓你可以很方便的使用pushState技術(shù)。

同時支持了緩存和本地存儲,下次訪問的時候直接讀取本地數(shù)據(jù),無需在次訪問。

并且展現(xiàn)方式支持動畫技術(shù),可以使用系統(tǒng)自帶的動畫方式,也可以自定義動畫展現(xiàn)方式。

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

環(huán)境:
jquery 1.10.2 下載
jquery.pjax.js 下載

使用方法:
監(jiān)控所有class為pjaxlink的鏈接,采用pjax更新鏈接頁面中id為ToInsert的容器內(nèi)容到本頁面中id為Content的容器中。若獲取內(nèi)容時間超過5秒,則直接跳轉(zhuǎn):

復(fù)制代碼 代碼如下:

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

使用實例:
原始頁面是通過跳轉(zhuǎn)的翻頁,我在不改變頁面內(nèi)容的前提下,使用pjax監(jiān)控翻頁鏈接,僅更新列表(保證列表容器是分頁容器的父節(jié)點)的內(nèi)容。

復(fù)制代碼 代碼如下:

if ($.support.pjax) {
    //遍歷所有分頁容器
    $('.pagercontainer').each(function(){
        //取得列表容器
        $listcontainer=$(this).parent();
        //取得列表容器的ID
        var listcontainerid=$listcontainer.attr('id');
        //用pjax監(jiān)控所有分頁鏈接并定義pjax來實現(xiàn)更新
        $(document).pjax('#'+listcontainerid+' .pagercontainer a', '#'+listcontainerid, {fragment:'#'+listcontainerid, timeout:5000});
    });
    $(document).on('pjax:send', function() {
        //在pjax發(fā)送請求時,顯示loading動畫層
        $('#loading').show();
    });
    $(document).on('pjax:complete', function() {
        //在pjax處理完成后,隱藏loading動畫層
        //由于速度太快會導(dǎo)到loading層閃爍,影響體驗,所以在此加上500毫秒延遲
        setTimeout(function(){$('#loading').hide()},500);
    });
}

相關(guān)文章

  • jQuery的文檔處理程序詳解

    jQuery的文檔處理程序詳解

    這篇文章主要介紹了jQuery的文檔處理程序,結(jié)合實例形式詳細(xì)分析了jQuery文檔處理程序的概念、原理、使用方法與相關(guān)注意事項,并詳細(xì)講述了文檔處理程序的優(yōu)勢,需要的朋友可以參考下
    2016-05-05
  • JQuery優(yōu)缺點分析說明

    JQuery優(yōu)缺點分析說明

    如果你還在猶豫是否要學(xué)習(xí)一個JavaScript框架,并困惑于選擇哪一個框架,那么我推薦你選擇jQuery。這并非說其它框架不好,只是jQuery可能是最穩(wěn)妥和最具回報性的選擇。
    2011-04-04
  • jQuery實現(xiàn) RadioButton做必選校驗功能

    jQuery實現(xiàn) RadioButton做必選校驗功能

    這篇文章主要介紹了jQuery實現(xiàn) RadioButton做必選校驗功能的相關(guān)資料,需要的朋友可以參考下
    2017-06-06
  • Bootstrap中點擊按鈕后變灰并顯示加載中實例代碼

    Bootstrap中點擊按鈕后變灰并顯示加載中實例代碼

    Bootstrap插件非常的好用了,今天小編通過本教程給大家介紹Bootstrap中點擊按鈕后變灰并顯示加載中實例代碼,非常不錯,感興趣的朋友一起看看吧
    2016-09-09
  • jQuery中filter()方法用法實例

    jQuery中filter()方法用法實例

    這篇文章主要介紹了jQuery中filter()方法用法,實例分析了filter()方法的功能、定義及篩選的幾種使用技巧,需要的朋友可以參考下
    2015-01-01
  • jQuery實現(xiàn)的導(dǎo)航條切換可顯示隱藏

    jQuery實現(xiàn)的導(dǎo)航條切換可顯示隱藏

    用jQuery實現(xiàn)一些導(dǎo)航條切換,顯示隱藏,主要用到slideToggle( ),toggeClass( ),toggle()
    2014-10-10
  • 實例代碼講解jquery easyui動態(tài)tab頁

    實例代碼講解jquery easyui動態(tài)tab頁

    這篇文章主要介紹了實例代碼講解jquery easyui動態(tài)tab頁的相關(guān)資料,需要的朋友可以參考下
    2015-11-11
  • 淺談Jquery為元素綁定事件

    淺談Jquery為元素綁定事件

    jQuery 使用on綁定動態(tài)生成的元素時,不能直接用該對象操作,而是選擇其非動態(tài)生成的父節(jié)點然后再找到本身才能達(dá)到效果。大家看看源碼就知道了。
    2015-04-04
  • 使用jQuery的toggle()方法對HTML標(biāo)簽進(jìn)行顯示、隱藏的方法(示例)

    使用jQuery的toggle()方法對HTML標(biāo)簽進(jìn)行顯示、隱藏的方法(示例)

    本文通過示例給大家介紹了使用jQuery的toggle()方法對HTML標(biāo)簽進(jìn)行顯示、隱藏操作的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-09-09
  • jQuery實現(xiàn)checkbox全選功能完整實例

    jQuery實現(xiàn)checkbox全選功能完整實例

    這篇文章主要介紹了jQuery實現(xiàn)checkbox全選功能,結(jié)合完整實例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2018-07-07

最新評論