jQuery ScrollPagination

看着腾讯微博的ScrollPagination挺好玩的，就在网上找找，写了个demo玩玩。

JQuery ScrollPagination ：
http://andersonferminiano.com/jqueryscrollpagination/ 

在该插件基础上修修改改。

1. 简单的servlet代码 

DemoServlet

 1 /**
 2  * Create by: zhuyoufeng
 3  * Date: 12-4-4
 4  */
 5 public class DemoServlet extends HttpServlet {
 6     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 7         doGet(request, response);
 8     }
 9 
10     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
11         List<String> content = new ArrayList<String>();
12         for (int i = 0; i < 20; i++) {
13             content.add("Let's learn how to implement Scroll Pagination" + i);
14         }
15         request.setAttribute("content", content);
16         request.getRequestDispatcher("/jsp/demo.jsp").forward(request, response);
17     }

18 } 

PaginationServlet 

 1 /**
 2  * Create by: zhuyoufeng
 3  * Date: 12-4-4
 4  */
 5 public class PaginationServlet extends HttpServlet {
 6     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 7         doGet(request, response);
 8     }
 9 
10     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
11         StringBuilder sb = new StringBuilder();
12         sb.append("{\"root\":[");
13         for (int i = 0; i < 20; i++) {
14             sb.append("{\"content\":\"New:Let's learn how to implement Scroll Pagination.\"},");
15         }
16         String str = sb.substring(0, sb.length() - 1) + "]}";
17         response.getWriter().println(str);
18     }

19 }

 2. 修改后的scrollpagination

 1 /*
 2  **    Anderson Ferminiano
 3  **    contato@andersonferminiano.com -- feel free to contact me for bugs or new implementations.
 4  **    jQuery ScrollPagination
 5  **    28th/March/2011
 6  **    http://andersonferminiano.com/jqueryscrollpagination/
 7  **    You may use this script for free, but keep my credits.
 8  **    Thank you.
 9  */
10 
11 (function ($) {
12 
13 
14     $.fn.scrollPagination = function (options) {
15         var opts = $.extend($.fn.scrollPagination.defaults, options||{});
16         var target = opts.scrollTarget;
17         if (target == null) {
18             target = obj;
19         }
20         opts.scrollTarget = target;
21         return this.each(function () {
22             $.fn.scrollPagination.init($(this), opts);
23         });
24 
25     };
26 
27     $.fn.stopScrollPagination = function () {
28         return this.each(function () {
29             $(this).attr('scrollPagination', 'disabled');
30         });
31 
32     };
33 
34     $.fn.scrollPagination.loadContent = function (obj, opts) {
35         var target = opts.scrollTarget;
36         var mayLoadContent = $(target).scrollTop() + opts.heightOffset >= $(document).height() - $(target).height();
37         if (mayLoadContent) {
38             if (opts.beforeLoad != null) {
39                 opts.beforeLoad();
40             }
41             $(obj).children().attr('rel', 'loaded');
42             $.ajax({
43                 type:'POST',
44                 url:opts.contentPage,
45                 data:opts.contentData,
46                 success:function (data) {
47                     //call your own function to load the content
48                     opts.loader(data);
49                     var objectsRendered = $(obj).children('[rel!=loaded]');
50 
51                     if (opts.afterLoad != null) {
52                         opts.afterLoad(objectsRendered);
53                     }
54                 },
55                 dataType:opts.dataType
56             });
57         }
58 
59     };
60 
61     $.fn.scrollPagination.init = function (obj, opts) {
62         var target = opts.scrollTarget;
63         $(obj).attr('scrollPagination', 'enabled');
64 
65         $(target).scroll(function (event) {
66             if ($(obj).attr('scrollPagination') == 'enabled') {
67                 $.fn.scrollPagination.loadContent(obj, opts);
68             }
69             else {
70                 event.stopPropagation();
71             }
72         });
73 
74         $.fn.scrollPagination.loadContent(obj, opts);
75 
76     };
77 
78     $.fn.scrollPagination.defaults = {
79         'contentPage':null,
80         'contentData':{},
81         'beforeLoad':null,
82         'afterLoad':null,
83         'scrollTarget':null,
84         'heightOffset':0,
85         //Add
86         'dataType':null,
87         'loader':function(data){}
88     };

89 })(jQuery);

3. Page

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 3 <html>
 4 <head>
 5     <title>Jquery Scroll Pagination</title>
 6     <script type="text/javascript" src="scripts/jquery.js"></script>
 7     <script type="text/javascript" src="scripts/scrollpagination.js"></script>
 8     <script type="text/javascript">
 9         $(function () {
10             $('#content').scrollPagination({
11                 'contentPage':'pagination',
12                 'contentData':{},
13                 'scrollTarget':$(window),
14                 'heightOffset':10,
15                 'beforeLoad':function () {
16                     $('#loading').fadeIn();
17                 },
18                 'afterLoad':function (elementsLoaded) {
19                     $('#loading').fadeOut();
20                     var i = 0;
21                     if ($('#content').children().size() > 100) {
22                         $('#nomoreresults').fadeIn();
23                         $('#content').stopScrollPagination();
24                     }
25                 },
26                 'dataType':'json',
27                 'loader':function (data) {
28                     $.each(data.root,function(idx,item){
29                         $('#content').append("<li><p>" + item.content + "</p></li>");
30                     });
31                 }
32             });
33 
34         });
35     </script>
36 </head>
37 <body>
38 <div id="scrollpaginationdemo">
39     <ul id="content">
40         <c:forEach var="item" items="${content}">
41             <li>
42                 <p>${item}</p>
43             </li>
44         </c:forEach>
45     </ul>
46     <div class="loading" id="loading">Wait a moment... it's loading!</div>
47     <div class="loading" id="nomoreresults">Sorry, no more results for your pagination demo.</div>
48 </div>
49 </body>

50 </html> 

参考：Demo