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