久久久久精品国产,丰满少妇粗大猛烈进高清播放,久久久97,在线18禁

<wbr id="x3zex"><nav id="x3zex"><em id="x3zex"></em></nav></wbr>

        <s id="x3zex"></s>
        1. <ruby id="x3zex"><nav id="x3zex"><acronym id="x3zex"></acronym></nav></ruby>
          <font id="x3zex"><noscript id="x3zex"></noscript></font>
          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的詳細(xì)描述,但一般人即使看未必看得懂,看得懂未必就調(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,                          //加載時候時候需要動畫,默認(rèn)是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>  

          三.細(xì)微部分

          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ù)分頁。
          欄目列表
          推薦內(nèi)容
          熱點內(nèi)容
          展開