網(wǎng)上對(duì)于infinite-scroll插件使用的例子不多。但由于它的出現(xiàn)，鼓吹了瀑布流形式的頁(yè)面展示方式，所以不得不了解了解這種新的分頁(yè)方式。
官網(wǎng)上有對(duì)infinite-scroll的詳細(xì)描述，但一般人即使看未必看得懂，看得懂未必就調(diào)試成功。所以借今晚有點(diǎn)時(shí)間，把跑通的例子供大家借鑒。
一.無(wú)限滾動(dòng)概念
首先，它是基于jQuery的，另外還要明白無(wú)限滾動(dòng)的概念：無(wú)限滾動(dòng)的實(shí)現(xiàn)原理就是當(dāng)你在網(wǎng)頁(yè)上的滾動(dòng)條滾動(dòng)到離網(wǎng)頁(yè)底部一定長(zhǎng)度的時(shí)候，觸發(fā)某ajax函數(shù)（infinite-scroll內(nèi)已經(jīng)封裝好）,往后臺(tái)加載文件或者數(shù)據(jù)，又或者從外部引入靜態(tài)html形式文件。
二.探討infinite-scroll
1.從網(wǎng)頁(yè)頭引入兩個(gè)js文件，注意必須先放jquery的
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
2.之后在網(wǎng)頁(yè)頭自己寫(xiě)一個(gè)js腳本
<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //頁(yè)面分頁(yè)元素--本頁(yè)的導(dǎo)航，意思就是一個(gè)可以觸發(fā)ajax函數(shù)的模塊
nextSelector: "#navigation a", //下一頁(yè)的導(dǎo)航
itemSelector: ".scroll " , //此處我用了類(lèi)選擇器，選擇的是你要加載的那一個(gè)塊（每次載入的數(shù)據(jù)放的地方）
animate: true, //加載時(shí)候時(shí)候需要?jiǎng)赢?huà)，默認(rèn)是false
maxPage: 3, //最大的頁(yè)數(shù)，也就是滾動(dòng)多少次停。這個(gè)頁(yè)碼必須得要你從數(shù)據(jù)庫(kù)里面拿
});
});
</script>
3.或許你看到這里還是不太清楚網(wǎng)頁(yè)怎么定義，這里給出我的demo，希望可以有幫助
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)限翻頁(yè)效果</title>
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
<script src="css/infinite-scroll/test/debug.js"></script>
<script>
$(document).ready(function (){ //別忘了加這句，除非你沒(méi)學(xué)Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //頁(yè)面分頁(yè)元素--成功后自動(dòng)隱藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
});
});
</script>
</head>
<body>
<div id="container"> <!-- 容器 -->
<div class="scroll"> <!-- 每次要加載數(shù)據(jù)的數(shù)據(jù)塊-->
第一頁(yè)內(nèi)容第一頁(yè)內(nèi)容<br>
第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>
第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>
第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容
</div>
</div>
<div id="navigation" align="center"> <!-- 頁(yè)面導(dǎo)航-->
<a href="user/list?page=1"></a> <!-- 此處可以是url，可以是action，要注意不是每種html都可以加，是跟當(dāng)前網(wǎng)頁(yè)有相同布局的才可以。另外一個(gè)重要的地方是page參數(shù)，這個(gè)一定要加在這里，它的作用是指出當(dāng)前頁(yè)面頁(yè)碼，沒(méi)加載一次數(shù)據(jù)，page自動(dòng)+1,我們可以從服務(wù)器用request拿到他然后進(jìn)行后面的分頁(yè)處理。-->
</div>
</body>
</html>
三.細(xì)微部分
1.js函數(shù)里還可定義的其他屬性:
debug : true, //用于調(diào)試，如果需要用到，只需在網(wǎng)頁(yè)頭引入官網(wǎng)demo里的debug.js文件
loadingImg : "/img/loading.gif", //加載時(shí)候顯示的進(jìn)度條，用戶(hù)可以自定義
loadingText : "Loading new posts...", //加載時(shí)顯示的文字
extraScrollPx: 50, //離網(wǎng)頁(yè)底部多少像素時(shí)觸發(fā)ajax
donetext : "I think we've hit the end, Jim" , //加載完數(shù)據(jù)(到達(dá)底部時(shí))顯示的文字提醒
errorCallback: function(){}, //加載完數(shù)據(jù)后的回調(diào)函數(shù)，可選
其他屬性暫不作過(guò)多介紹
2.數(shù)據(jù)的載入方式
①html ：如果你已經(jīng)有固定的數(shù)據(jù)塊，可以放到html里面加載靜態(tài)頁(yè)面。
②json ：可以用后臺(tái)返回json的方式，返回的時(shí)候要指定temple里面的html模版，否則會(huì)出錯(cuò)。
③我上面例子用的其實(shí)也是json，前臺(tái)在Action層把數(shù)據(jù)取出后再用StringBuilder拼裝成html格式的字符串返回前臺(tái)。（個(gè)人習(xí)慣）
3.數(shù)據(jù)分頁(yè)方式
本例用hibernate進(jìn)行數(shù)據(jù)分頁(yè)。
官網(wǎng)上有對(duì)infinite-scroll的詳細(xì)描述，但一般人即使看未必看得懂，看得懂未必就調(diào)試成功。所以借今晚有點(diǎn)時(shí)間，把跑通的例子供大家借鑒。
一.無(wú)限滾動(dòng)概念
首先，它是基于jQuery的，另外還要明白無(wú)限滾動(dòng)的概念：無(wú)限滾動(dòng)的實(shí)現(xiàn)原理就是當(dāng)你在網(wǎng)頁(yè)上的滾動(dòng)條滾動(dòng)到離網(wǎng)頁(yè)底部一定長(zhǎng)度的時(shí)候，觸發(fā)某ajax函數(shù)（infinite-scroll內(nèi)已經(jīng)封裝好）,往后臺(tái)加載文件或者數(shù)據(jù)，又或者從外部引入靜態(tài)html形式文件。
二.探討infinite-scroll
1.從網(wǎng)頁(yè)頭引入兩個(gè)js文件，注意必須先放jquery的
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
2.之后在網(wǎng)頁(yè)頭自己寫(xiě)一個(gè)js腳本
<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //頁(yè)面分頁(yè)元素--本頁(yè)的導(dǎo)航，意思就是一個(gè)可以觸發(fā)ajax函數(shù)的模塊
nextSelector: "#navigation a", //下一頁(yè)的導(dǎo)航
itemSelector: ".scroll " , //此處我用了類(lèi)選擇器，選擇的是你要加載的那一個(gè)塊（每次載入的數(shù)據(jù)放的地方）
animate: true, //加載時(shí)候時(shí)候需要?jiǎng)赢?huà)，默認(rèn)是false
maxPage: 3, //最大的頁(yè)數(shù)，也就是滾動(dòng)多少次停。這個(gè)頁(yè)碼必須得要你從數(shù)據(jù)庫(kù)里面拿
});
});
</script>
3.或許你看到這里還是不太清楚網(wǎng)頁(yè)怎么定義，這里給出我的demo，希望可以有幫助
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)限翻頁(yè)效果</title>
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
<script src="css/infinite-scroll/test/debug.js"></script>
<script>
$(document).ready(function (){ //別忘了加這句，除非你沒(méi)學(xué)Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //頁(yè)面分頁(yè)元素--成功后自動(dòng)隱藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
});
});
</script>
</head>
<body>
<div id="container"> <!-- 容器 -->
<div class="scroll"> <!-- 每次要加載數(shù)據(jù)的數(shù)據(jù)塊-->
第一頁(yè)內(nèi)容第一頁(yè)內(nèi)容<br>
第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>
第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>
第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容<br>第一頁(yè)內(nèi)容
</div>
</div>
<div id="navigation" align="center"> <!-- 頁(yè)面導(dǎo)航-->
<a href="user/list?page=1"></a> <!-- 此處可以是url，可以是action，要注意不是每種html都可以加，是跟當(dāng)前網(wǎng)頁(yè)有相同布局的才可以。另外一個(gè)重要的地方是page參數(shù)，這個(gè)一定要加在這里，它的作用是指出當(dāng)前頁(yè)面頁(yè)碼，沒(méi)加載一次數(shù)據(jù)，page自動(dòng)+1,我們可以從服務(wù)器用request拿到他然后進(jìn)行后面的分頁(yè)處理。-->
</div>
</body>
</html>
三.細(xì)微部分
1.js函數(shù)里還可定義的其他屬性:
debug : true, //用于調(diào)試，如果需要用到，只需在網(wǎng)頁(yè)頭引入官網(wǎng)demo里的debug.js文件
loadingImg : "/img/loading.gif", //加載時(shí)候顯示的進(jìn)度條，用戶(hù)可以自定義
loadingText : "Loading new posts...", //加載時(shí)顯示的文字
extraScrollPx: 50, //離網(wǎng)頁(yè)底部多少像素時(shí)觸發(fā)ajax
donetext : "I think we've hit the end, Jim" , //加載完數(shù)據(jù)(到達(dá)底部時(shí))顯示的文字提醒
errorCallback: function(){}, //加載完數(shù)據(jù)后的回調(diào)函數(shù)，可選
其他屬性暫不作過(guò)多介紹
2.數(shù)據(jù)的載入方式
①html ：如果你已經(jīng)有固定的數(shù)據(jù)塊，可以放到html里面加載靜態(tài)頁(yè)面。
②json ：可以用后臺(tái)返回json的方式，返回的時(shí)候要指定temple里面的html模版，否則會(huì)出錯(cuò)。
③我上面例子用的其實(shí)也是json，前臺(tái)在Action層把數(shù)據(jù)取出后再用StringBuilder拼裝成html格式的字符串返回前臺(tái)。（個(gè)人習(xí)慣）
3.數(shù)據(jù)分頁(yè)方式
本例用hibernate進(jìn)行數(shù)據(jù)分頁(yè)。
鄂公網(wǎng)安備 42090202000212號(hào)