国产免费又爽又刺激在线观看,免费一级毛片在线播放放视频,最近日本免费观看高清视频,亚洲无码视频观看

<ruby id="cmmwe"></ruby>

  • <var id="cmmwe"></var>
    <b id="cmmwe"></b>
    <source id="cmmwe"><track id="cmmwe"><ins id="cmmwe"></ins></track></source>

      1. 0712-2888027 189-8648-0214
        微信公眾號

        孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

        當(dāng)前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > 【無限滾動加載數(shù)據(jù)】—infinite-scroll插件的使用

        【無限滾動加載數(shù)據(jù)】—infinite-scroll插件的使用

        時間:2016-06-17來源:風(fēng)信官網(wǎng) 點擊: 1866次
        網(wǎng)上對于infinite-scroll插件使用的例子不多。但由于它的出現(xiàn),鼓吹了瀑布流形式的頁面展示方式,所以不得不了解了解這種新的分頁方式。

        官網(wǎng)上有對infinite-scroll的詳細描述,但一般人即使看未必看得懂,看得懂未必就調(diào)試成功。所以借今晚有點時間,把跑通的例子供大家借鑒。

        一.無限滾動概念

        首先,它是基于jQuery的,另外還要明白無限滾動的概念:無限滾動的實現(xiàn)原理就是當(dāng)你在網(wǎng)頁上的滾動條滾動到離網(wǎng)頁底部一定長度的時候,觸發(fā)某ajax函數(shù)(infinite-scroll內(nèi)已經(jīng)封裝好),往后臺加載文件或者數(shù)據(jù),又或者從外部引入靜態(tài)html形式文件。

        二.探討infinite-scroll

        1.從網(wǎng)頁頭引入兩個js文件,注意必須先放jquery的

            <script src="css/infinite-scroll/jquery-1.6.4.js"></script>  
            <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>  

        2.之后在網(wǎng)頁頭自己寫一個js腳本

            <script>  
            $(document).ready(function (){  
              $("#container").infinitescroll({  
                    navSelector: "#navigation",      //頁面分頁元素--本頁的導(dǎo)航,意思就是一個可以觸發(fā)ajax函數(shù)的模塊  
                    nextSelector: "#navigation a",  //下一頁的導(dǎo)航  
                    itemSelector: ".scroll " ,             //此處我用了類選擇器,選擇的是你要加載的那一個塊(每次載入的數(shù)據(jù)放的地方)        
                    animate: true,                          //加載時候時候需要動畫,默認是false  
                    maxPage: 3,                            //最大的頁數(shù),也就是滾動多少次停。這個頁碼必須得要你從數(shù)據(jù)庫里面拿         
                });  
            });   
               </script>  

        3.或許你看到這里還是不太清楚網(wǎng)頁怎么定義,這里給出我的demo,希望可以有幫助

            <%@ page language="java" contentType="text/html; charset=utf-8"  
                pageEncoding="utf-8"%>  
            <!DOCTYPE html>  
            <html>  
            <head>  
            <meta charset="utf-8">  
            <title>無限翻頁效果</title>  
            <script src="css/infinite-scroll/jquery-1.6.4.js"></script>  
            <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>  
            <script src="css/infinite-scroll/test/debug.js"></script>  
             <script>  
             $(document).ready(function (){               //別忘了加這句,除非你沒學(xué)Jquery  
                  $("#container").infinitescroll({  
                        navSelector: "#navigation",     //頁面分頁元素--成功后自動隱藏  
                        nextSelector: "#navigation a",  
                        itemSelector: ".scroll " ,             
                        animate: true,  
                        maxPage: 3,                                                  
                    });  
             });   
                </script>  
            </head>  
            <body>  
                <div id="container">            <!-- 容器 -->  
                    <div class="scroll">         <!-- 每次要加載數(shù)據(jù)的數(shù)據(jù)塊-->  
                    第一頁內(nèi)容第一頁內(nèi)容<br>  
                    第一頁內(nèi)容<br>第一頁內(nèi)容<br>第一頁內(nèi)容<br>  
                    第一頁內(nèi)容<br>第一頁內(nèi)容<br>第一頁內(nèi)容<br>  
                    第一頁內(nèi)容<br>第一頁內(nèi)容<br>第一頁內(nèi)容  
                    </div>  
                </div>  
                    <div id="navigation" align="center">         <!-- 頁面導(dǎo)航-->  
                    <a href="user/list?page=1"></a>        <!-- 此處可以是url,可以是action,要注意不是每種html都可以加,是跟當(dāng)前網(wǎng)頁有相同布局的才可以。另外一個重要的地方是page參數(shù),這個一定要加在這里,它的作用是指出當(dāng)前頁面頁碼,沒加載一次數(shù)據(jù),page自動+1,我們可以從服務(wù)器用request拿到他然后進行后面的分頁處理。-->  
                </div>  
            </body>  
            </html>  

        三.細微部分

        1.js函數(shù)里還可定義的其他屬性:

        debug        : true,                                         //用于調(diào)試,如果需要用到,只需在網(wǎng)頁頭引入官網(wǎng)demo里的debug.js文件                  
        loadingImg   : "/img/loading.gif",                   //加載時候顯示的進度條,用戶可以自定義       
        loadingText  : "Loading new posts...",            //加載時顯示的文字     
        extraScrollPx: 50,                                            //離網(wǎng)頁底部多少像素時觸發(fā)ajax  
        donetext     : "I think we've hit the end, Jim" ,     //加載完數(shù)據(jù)(到達底部時)顯示的文字提醒  
        errorCallback: function(){},                             //加載完數(shù)據(jù)后的回調(diào)函數(shù),可選   

        其他屬性暫不作過多介紹


        2.數(shù)據(jù)的載入方式

        ①html  :如果你已經(jīng)有固定的數(shù)據(jù)塊,可以放到html里面加載靜態(tài)頁面。

        ②json  :可以用后臺返回json的方式,返回的時候要指定temple里面的html模版,否則會出錯。

        ③我上面例子用的其實也是json,前臺在Action層把數(shù)據(jù)取出后再用StringBuilder拼裝成html格式的字符串返回前臺。(個人習(xí)慣)

        3.數(shù)據(jù)分頁方式

        本例用hibernate進行數(shù)據(jù)分頁。

        您可能感興趣的相關(guān)文章:

        欄目列表
        推薦內(nèi)容
        熱點內(nèi)容
        展開