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