jquery 페이지 드래그

48708 단어 jquery
scrollpagination.js
/*

**    Anderson Ferminiano

**    [email protected] -- 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;

}

 
Jquery 버전: jQuery JavaScript Library v1.5.1

좋은 웹페이지 즐겨찾기