原文鏈接：http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91
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
;
}
});
});
|