jQuery Infinite Ajax Scroll(ias) 分頁插件介紹

Infinite Ajax Scroll簡稱ias，從字面來了解是"無限的ajax滾動"，其實就是一款jQuery滾動分頁插件(頁面滾動到最底部自動異步加載資料)，本部落格有段時間的分頁就是利用這個插件來做的。

作者也是剛剛接觸這個插件，下面把自己了解的插件使用方法給大家介紹一下，說的不對的地方還請指正。

1、利用這個插件分頁的示例網站：36氪，有興趣的話可以看下。

2、插件下載下傳：點選下載下傳。

3、插件的使用前提：網站必須實作分頁即網頁中必須有分頁代碼，在分頁代碼中必須包含下一頁的按鈕或連結。

4、插件的使用方法：頁面中必須引入jquery-ias.js腳本檔案，最好引入jquery.ias.css樣式檔案。

5、插件參數簡介

  (1)、container：容器，所有資料的最外層元素(下圖中class為artList的ul)。

   (2)、item：項，每一條資料的最外層元素(下圖中class為dataItem的li)。

   (3)、pagination：分頁，分頁代碼最外層元素(下圖中class為m_page的section)。

   (4)、next：下一頁，分頁代碼中的下一頁按鈕或連結(下圖中id為nextPage的li下的a元素)。

   (5)、loader：加載，資料在加載過程中提示的内容(可以是文本、圖檔或圖文結合)。

   (6)、triggerPageThreshold：觸發分頁的門檻值，是數字，當 目前頁碼等于這個值 滑鼠再滾動時 頁面就會顯示trigger屬性設定的值，可以利用這個屬性和trigger屬性實作上一頁、下一頁的分頁功能，不過可能要改寫插件中get_trigger方法。

   (7)、trigger：當 目前頁碼等于triggerPageThreshold屬性的值 滑鼠再滾動時 此屬性設定的内容将會在頁面中顯示。

   (8)、beforePageChange：頁碼改變前，加載資料之前調用的函數，在這個函數中可以判斷是否到了最後一頁，如果不希望再加載資料，函數傳回false即可。

6、作者對這個插件的了解僅限于上面介紹的這些，有興趣的童鞋可以自行研究并和作者交流。

7、示例代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

jQuery( function ($){ var _gaq = _gaq || []; //頁碼計數器 var pageCount = 1; jQuery.ias({ container: '.artList' , item: '.dataItem' , pagination: '.m_page' , next: '#nextPage a' , loader: "<img src='/img/front/loader.gif' /><font size='5'>正在拼命的為您加載</font>" , trigger: '拼命的為您加載完了所有内容' , triggerPageThreshold:<%$pages%>, beforePageChange: function (curScrOffset, nextPageUrl){ pageCount++; //總頁數 var pages = parseInt( '<%$pages%>' , 10); if (pageCount <= pages)  return true ; jQuery( ".artList" ).css({ 'padding-bottom' : '91px' }); return false ; } }); });  Infinite Ajax Scroll 可将你現有的網頁變成支援無限滾動的頁面，無需太麻煩就可搞定。仔細研究後發現該插件正是我所需，而且結構很簡單，如果你現在的頁面已經實作了分頁功能的話，那麼很容易的就能把它變成支援無限滾動的頁面，現有的頁面幾乎不需要做任何改動，隻需要引用相關的js檔案，然後配置如下的js： 1: jQuery.ias({ 2: container : ".listing", 3: // Enter the selector of the element containing 寫入容器的元素<selector> 4: // your items that you want to paginate. 具體資料的元素辨別 6: item : ".post", 7: // Enter the selector of the element that each 要加載資料的元素辨別 8: // item has. Make sure the elements are inside 用來提取下一頁資訊裡面的元素 9: // the container element. 進而加載到上面的容器中 11: pagination : "#content .navigation", 12: // Enter the selector of the element that contains 分頁資訊的容器元素辨別 13: // your regular pagination links, like next, 即：首頁，上一頁，下一頁，尾頁等資訊的容器。 14: // previous and the page numbers. This element 15: // will be hidden when IAS loads. 17: next : ".next-posts a", 18: // Enter the selector of the link element that 下一頁的元素辨別，用來擷取下一頁的資訊元素 19: // links to the next page. The href attribute 20: // of this element will be used to get the items 21: // from the next page. 23: loader : "images/loader.gif" 24: // Enter the url to the loader image. This image 資料進行提取加載的時候顯示的圖檔 25: // will be displayed when the next page with items 26: // is loaded via AJAX. 27: });