java中的翻页,java滚动翻页

一.无限滚动概念首先，它是基于jQuery的，另外还要明白无限滚动的概念：无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候，触发某ajax函数(infinite-scroll内已经封装好),往后台加载文件或者数据，又或者从外部引入静态html形式文件。二.探讨infinite-scroll1.从网页头引入两个js文件，注意必须先放jquery的

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片

2.之后在网页头自己写一个js脚本

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片

$(document).ready(function (){

$("#container").infinitescroll({

navSelector: "#navigation", //页面分页元素--本页的导航，意思就是一个可以触发ajax函数的模块

nextSelector: "#navigation a", //下一页的导航

itemSelector: ".scroll " , //此处我用了类选择器，选择的是你要加载的那一个块(每次载入的数据放的地方)

animate: true, //加载时候时候需要动画，默认是false

maxPage: 3, //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿

});

});

3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助

[html] view plain copy 在CODE上查看代码片派生到我的代码片

pageEncoding="utf-8"%>

无限翻页效果

$(document).ready(function (){ //别忘了加这句，除非你没学Jquery

$("#container").infinitescroll({

navSelector: "#navigation", //页面分页元素--成功后自动隐藏

nextSelector: "#navigation a",

itemSelector: ".scroll " ,

animate: true,

maxPage: 3,

});

});

第一页内容第一页内容

第一页内容
第一页内容
第一页内容

第一页内容
第一页内容
第一页内容

第一页内容
第一页内容
第一页内容

三.细微部分1.js函数里还可定义的其他属性:

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片

debug : true, //用于调试，如果需要用到，只需在网页头引入官网demo里的debug.js文件

loadingImg : "/img/loading.gif", //加载时候显示的进度条，用户可以自定义

loadingText : "Loading new posts...", //加载时显示的文字

extraScrollPx: 50, //离网页底部多少像素时触发ajax

donetext : "I think we've hit the end, Jim" , //加载完数据(到达底部时)显示的文字提醒

errorCallback: function(){}, //加载完数据后的回调函数，可选

其他属性暂不作过多介绍

2.数据的载入方式①html ：如果你已经有固定的数据块，可以放到html里面加载静态页面。②json ：可以用后台返回json的方式，返回的时候要指定temple里面的html模版，否则会出错。③我上面例子用的其实也是json，前台在Action层把数据取出后再用StringBuilder拼装成html格式的字符串返回前台。(个人习惯)3.数据分页方式本例用hibernate进行数据分页。