افزودن اطلاعات با Scroll توسط jQuery

در این مقاله به شما بارگذاری اطلاعات درخواستی را توسط کتابخانه جاوااسکریپت jQuery، وقتی که کاربر از ماوس Scroll استفاده می کند را آموزش خواهیم داد. Scroll یکی از روش های جایگزین صفحه بندی اطلاعات می باشد که با توجه به سادگی آن و عدم نیاز به کلیک و باز شدن صفحه جدید ،بسیار کاربرپسند می باشد .

افزودن اطلاعات با Scroll توسط jQuery

این روش با نزدیک شدن صفحه به انتهای لیست به صورت اتوماتیک محتویات بعدی برای کاربر لود می شود. اساس این روش بر مبنای رویداد (event)  اسکرول(Scroll) است. با هر بار اسکرول, ارتفاع صفحه و موقعیت اسکرول محاسبه می شود و در صورتی که کاربر تا انتهای صفحه کمتراز مقدار معینی فاصله دارد , برنامه متوجه می شود که کاربر به انتهای صفحه نزدیک شده و لذا محتویات بعدی را بارگذاری میکند. 

وقتی که ما اطلاعات را بر روی Scroll بارگذاری کردیم, نیاز داریم تا رویدادهای ویندوز را اجرا کنیم. بنابراین یک ‍‍‍‍‍‍‍‍‍‍‍‍‍‍پلاگین jQuery را در صفحه همانند مثال داده شده اضافه کنید :


    <script src="jquery-2.1.4.min.js"></script>   

مرحله بعدی ما بارگذاری داده های استاتیک یا اولیه :


    <div id="myScroll">  
            <p>  
                Contents will load here!!!.<br />  
            </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
        </div>   

حالا تگ style را در صفحه همانند مثال زیر اضافه کنید :


    <style>  
            #myScroll {  
                border: 1px solid #999;  
            }  
      
            p {  
                border: 1px solid #ccc;  
                padding: 5px;  
                text-align: center;  
            }  
      
            .loading {  
                color: red;  
            }  
            .dynamic {  
                background-color:#ccc;  
                color:#000;  
            }  
        </style>   

برنامه را اجرا کنید و خروجی زیر را مشاهده می کنید:

 بنابراین ما داده های استاتیک را بارگذاری کردیم و حالا مرحله بعدی این است که رویداد Scroll را اجرا کنیم.


    $(window).scroll(function () {  
               if ($(window).scrollTop() == $(document).height() - $(window).height()) {  
                   appendData();  
               }  
           });   

در کد قبلی ما رویداد Scroll را فراخوانی کردیم و وقتی شرط $(window).scrollTop() == $(document).height() - $(window).height()  برقرار بود یک تابع را فراخوانی میکنیم. شما می توانید تابع را در زیر مشاهده کنید :


    function appendData() {  
               var html = '';  
               for (i = 0; i < 10; i++) {  
                   html += '<p class="dynamic">Dynamic Data : Life treats you in the same way, how you treat your life.Follow your passion, be prepared, do not let anyone limit your dreams. My Passion towards my life !!! - See more at:<a href="http://sibeeshpassion.com/">http://sibeeshpassion.com/</a> </p>';  
               }  
               $('#myScroll').append(html);  
           }   

در اینجا ما ۱۰ رکورد را به صورت پویا وارد می کنیم و اطلاعات ایجاد شده را به عنصر اصلی اضافه می کنیم . وقتی که این کار را انجام دادید شما می توانید خروجی را طبق زیر مشاهده کنید :

کد کامل :


    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>Load data on demand demo - Sibeesh Passion</title>  
        <script src="jquery-2.1.4.min.js"></script>  
        <style>  
            #myScroll {  
                border: 1px solid #999;  
            }  
      
            p {  
                border: 1px solid #ccc;  
                padding: 5px;  
                text-align: center;  
            }  
      
            .loading {  
                color: red;  
            }  
            .dynamic {  
                background-color:#ccc;  
                color:#000;  
            }  
        </style>  
        <script>  
            $(window).scroll(function () {  
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {  
                    appendData();  
                }  
            });  
            function appendData() {  
                var html = '';  
                for (i = 0; i < 10; i++) {  
                    html += '<p class="dynamic">Dynamic Data : Life treats you in the same way, how you treat your life.Follow your passion, be prepared, do not let anyone limit your dreams. My Passion towards my life !!! - See more at:<a href="http://sibeeshpassion.com/">http://sibeeshpassion.com/</a> </p>';  
                }  
                $('#myScroll').append(html);  
            }  
        </script>  
    </head>  
    <body>  
        <div id="myScroll">  
            <p>  
                Contents will load here!!!.<br />  
            </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
            <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don't let anyone limit your dreams. My Passion towards my life !!! - See more at: http://sibeeshpassion.com/ </p>  
        </div>  
    </body>  
    </html>   

 

فایل های ضمیمه