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. 具體數據的元素標識 5:
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. 從而加載到上面的容器中 10:
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. 16:
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. 22:
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: });
|
