jquery拖动分页

转载

mob60475704a236 2014-01-02 11:05:00

文章标签 jquery sed html javascript github 文章分类 代码人生

scrollpagination.js

/*
**    Anderson Ferminiano
**    contato@andersonferminiano.com -- feel free to contact me for bugs or new implementations.
**    jQuery ScrollPagination
**    28th/March/2011
**    http://andersonferminiano.com/jqueryscrollpagination/
**    You may use this script for free, but keep my credits.
**    Thank you.
*/

(function( $ ){
     
         
 $.fn.scrollPagination = function(options) {
      
        var opts = $.extend($.fn.scrollPagination.defaults, options);  
        var target = opts.scrollTarget;
        if (target == null){
            target = obj; 
         }
        opts.scrollTarget = target;
     
        return this.each(function() {
          $.fn.scrollPagination.init($(this), opts);
        });

  };
  
  $.fn.stopScrollPagination = function(){
      return this.each(function() {
         $(this).attr('scrollPagination', 'disabled');
      });
      
  };
  
  $.fn.scrollPagination.loadContent = function(obj, opts){
     var target = opts.scrollTarget;
     var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
     if (mayLoadContent){
         if (opts.beforeLoad != null){
            opts.beforeLoad(); 
         }
         $(obj).children().attr('rel', 'loaded');
         $.ajax({
              type: 'POST',
              url: opts.contentPage,
              data: opts.contentData,
              success: function(data){
                $(obj).append(data); 
                var objectsRendered = $(obj).children('[rel!=loaded]');
                
                if (opts.afterLoad != null){
                    opts.afterLoad(objectsRendered);    
                }
              },
              dataType: 'html'
         });
     }
     
  };
  
  $.fn.scrollPagination.init = function(obj, opts){
     var target = opts.scrollTarget;
     $(obj).attr('scrollPagination', 'enabled');
    
     $(target).scroll(function(event){
        if ($(obj).attr('scrollPagination') == 'enabled'){
             $.fn.scrollPagination.loadContent(obj, opts);        
        }
        else {
            event.stopPropagation();    
        }
     });
     
     $.fn.scrollPagination.loadContent(obj, opts);
     
 };
    
 $.fn.scrollPagination.defaults = {
           'contentPage' : null,
          'contentData' : {},
         'beforeLoad': null,
         'afterLoad': null    ,
         'scrollTarget': null,
         'heightOffset': 0          
 };    
})( jQuery );

democontent.asp

<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod. </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Phasellus vehicula turpis nec dui facilisis eget condimentum risus ullamcorper. Nunc imperdiet, tortor ultrices aliquam eleifend, nisl turpis venenatis dui, at vestibulum magna tellus in tortor. </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus.  </p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>Aenean interdum dui vitae purus molestie nec placerat nibh semper. Maecenas ultrices elementum dapibus. Aenean feugiat, metus in mattis mattis, justo nisi dignissim libero, ac volutpat dui nibh quis metus.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ScrollPagination</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/scrollpagination.js"></script>
<link href="scrollpagination_demo.css" rel="stylesheet" media="screen" />
<meta name="author" content="Anderson Ferminiano" />
<meta name="keywords" content="jquery, plugin, anderson ferminiano, scroll, pagination, scroll pagination, html5" /> 
<script type="text/javascript">
$(function(){
    $('#content').scrollPagination({
        'contentPage': 'democontent.asp', // the url you are fetching the results
        'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
        'scrollTarget': $(window), // who gonna scroll? in this example, the full window
        'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
        'beforeLoad': function(){ // before load function, you can display a preloader div
            $('#loading').fadeIn();    
        },
        'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
             $('#loading').fadeOut();
             var i = 0;
             $(elementsLoaded).fadeInWithDelay();
             if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
                 $('#nomoreresults').fadeIn();
                $('#content').stopScrollPagination();
             }
        }
    });
    
    // code for fade in element by element
    $.fn.fadeInWithDelay = function(){
        var delay = 0;
        return this.each(function(){
            $(this).delay(delay).animate({opacity:1}, 200);
            delay += 100;
        });
    };
           
});
</script>
</head>
<body>
<div id="scrollpaginationdemo">
    <div class="about">
        <h1>jQuery ScrollPagination - <a href="http://www.twitter.com/andferminiano" target="_blank">@andferminiano</a></h1>
        <p>Official post in my <a href="http://www.andersonferminiano.com/blog/2012/07/jquery-scroll-pagination/" target="_blank">blog</a></p>
        <p>jQuery ScrollPagination plugin has been developed by <a href="http://www.andersonferminiano.com" target="_blank">Anderson Ferminiano</a> for studying purposes, you may use it for free in any project you want, please maintain the credits.</p>

    </div>
     <div class="about">
        <h1>Sources</h1>
        <p><a href="https://github.com/andferminiano/jquery-scroll-pagination" target="_blank">Github me!</a></p>
        <p>Click <a href="jqueryscrollpagination.zip" target="_blank">here</a> to download the full source with demo (.zip format).</p>
    </div>
    <div class="about">
        <h1>Example</h1>
        <textarea readonly="readonly">
           $(function(){
                $('#content').scrollPagination({
                    'contentPage': 'democontent.html', // the url you are fetching the results
                    'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
                    'scrollTarget': $(window), // who gonna scroll? in this example, the full window
                    'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
                    'beforeLoad': function(){ // before load function, you can display a preloader div
                        $('#loading').fadeIn();
                    },
                    'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
                         $('#loading').fadeOut();
                         var i = 0;
                         $(elementsLoaded).fadeInWithDelay();
                         if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
                            $('#nomoreresults').fadeIn();
                            $('#content').stopScrollPagination();
                         }
                    }
                });

                // code for fade in element by element
                $.fn.fadeInWithDelay = function(){
                    var delay = 0;
                    return this.each(function(){
                        $(this).delay(delay).animate({opacity:1}, 200);
                        delay += 100;
                    });
                };
                       
            });
        </textarea>
    </div>
    <ul id="content">
        <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li>
        <li><p>Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod. </p></li>
        <li><p>Phasellus vehicula turpis nec dui facilisis eget condimentum risus ullamcorper. Nunc imperdiet, tortor ultrices aliquam eleifend, nisl turpis venenatis dui, at vestibulum magna tellus in tortor. </p></li>
        <li><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus.  </p></li>
        <li><p>Aenean interdum dui vitae purus molestie nec placerat nibh semper. Maecenas ultrices elementum dapibus. Aenean feugiat, metus in mattis mattis, justo nisi dignissim libero, ac volutpat dui nibh quis metus.</p></li>
        <li><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
    </ul>
    <div class="loading" id="loading">Wait a moment... it's loading!</div>
    <div class="loading" id="nomoreresults">Sorry, no more results for your pagination demo.</div>
</div>
</body>
</html>

scrollpagination_demo.css

body {
    margin:20px 0px 20px 0px;
    padding:0px;
    background:#493333;
    color:#e4e4e4;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    
}

.about {
    background:#d6d6c7;
    color:#303030;
    font-size:14px;
    width:600px;
    margin:10px auto;
    border-radius:15px;
    padding:5px 10px;
}

.about  h1 {
    font-size:29px;
    margin:5px;
    padding:0px;
    color:#352828;
}

.about  a {
    color:#352828;    
}

.about textarea {
    width:500px;
    border:0px;
    border-left:40px solid #493333;
    background:#c6c6aa;
    padding:10px 10px 10px 20px;
    margin:0px auto;
    display:block;
    color:#000 !important;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    height:600px;
    overflow:hidden;
}

#scrollpaginationdemo {
    width:600px;
    margin:0px auto;
}

#scrollpaginationdemo ul {
    list-style:none;
    width:100%;
    margin:0px auto;
    padding:0px;
}

#scrollpaginationdemo ul li {
    margin:10px 0px;
    width:100%;
    background:#352828;
    padding:5px 10px;
    border-radius: 15px;
    text-shadow: 2px 1px -1px #000000;
}

.loading {
    background:#c1c39a;
    color:#303030;
    font-size:20px;
    padding:5px 10px;
    text-align:center;
    width:450px;
    margin:0px auto;
    display:none;
    border-radius: 5px;
}