使用jQueryMobile實現滑動翻頁效果的方法_jquery

本文實例講述了使用jQueryMobile實現滑動翻頁效果的方法。分享給大家供大家參考。具體分析如下：

滑動手勢在行動裝置是很流行的，在行動裝置滑動翻頁中很常見

雖然這個功能可以在jQueryMobile中實現，但是個人與之前一篇【jQuery手機瀏覽器中拖曳動作的艱難性分析】中的觀點一致，由於這是在手機瀏覽器中瀏覽，而不是安卓的一個獨立APP，所以不要經常點擊以外的行動裝置手勢，以免跟手機瀏覽器與手機系統本身的手勢發生衝突。

那麼，使用jQueryMobile實現滑動翻頁的效果到底怎麼做呢？

一、基本目標

在手機瀏覽器中的jQueryMobile框架頁中現實滑動手勢翻頁的功能，如下圖：

並且記錄目前頁的頁數，隨使用者滑動而自動增加與減少。

二、製作過程

關於JqueryMobile的介面怎麼佈置，不再細說，詳情請翻閱之前一篇【jQueryMobile之Helloworld與頁面切換的方法】

如下的程式碼註釋，主要是敘述如何透過對JqueryMobile封裝好的滑動手勢jQuery Mobile Swipeleft與jQuery Mobile Swiperight處理，來實現上面的頁面，W3C《jQuery Mobile Touch 事件》一文中對此的敘述是有問題的，實驗代碼與給出的代碼並不一致：

複製程式碼 程式碼如下:

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 

 
   

Title

 
 
 

 
 
 

 
     

 
       

你好1

 
     

 
     

 
       

你好2

 
     

 
     

 
       

你好3

 
     

 
     

 
       

你好4

 
     

 
       
     

 
        /4 
     

 
 

 
 
 

 
     

 
     

 
       
• a
 
       
• b
 
       
• c
 
     

 
   

 
     
 

  

  

 
 
<script>  <br />     /* jquery部分，先定義一個記錄翻到幾頁的變數 */  <br />     var divnum=1;  <br />     /* 相當於.innerhtml=""; jquery設定一個節點的值是需要這樣設定的 */  <br />     $("#divnumber").text(divnum)  <br />     /* 在#mypage頁面開啟觸控 */  <br />     $(document).on("pageinit","#mypage",function(){  <br />         /* 如果對div1的非空白部分向左滑，那麼div1就隱藏，div2就顯示，同時頁面計數器 1，並更新divnumber這個行內文字 */  <br />         $("#div1").on("swipeleft",function(){  <br />              $("#div1").hide("fast");  <br />              $("#div2").show("fast");  <br />              divnum=divnum 1;  <br />              $("#divnumber").text(divnum)  <br />         });  <br />         /* 如果對div2的非空白部分向右滑，那麼div1就顯示，div2就隱藏，同時頁面計數器-1，並更新divnumber這個行內文字 */  <br />          $("#div2").on("swiperight",function(){  <br />              $("#div1").show("fast");  <br />              $("#div2").hide("fast");  <br />              divnum=divnum-1;  <br />              $("#divnumber").text(divnum)  <br />         });  <br />         /* 如果對div2的非空白部分向左滑，那麼div2就隱藏，div3就顯示，同時頁面計數器 1，並更新divnumber這個行內文本，下面如此類推 */  <br />         $("#div2").on("swipeleft",function(){  <br />              $("#div2").hide("fast");  <br />              $("#div3").show("fast");  <br />              divnum=divnum 1;  <br />              $("#divnumber").text(divnum)  <br />         });  <br />         $("#div3").on("swiperight",function(){  <br />              $("#div2").show("fast");  <br />              $("#div3").hide("fast");  <br />              divnum=divnum-1;  <br />              $("#divnumber").text(divnum)  <br />         });  <br />         $("#div3").on("swipeleft",function(){  <br />              $("#div3").hide("fast");  <br />              $("#div4").show("fast");  <br />              divnum=divnum 1;  <br />              $("#divnumber").text(divnum)  <br />         });  <br />          $("#div4").on("swiperight",function(){  <br />              $("#div3").show("fast");  <br />              $("#div4").hide("fast");  <br />              divnum=divnum-1;  <br />              $("#divnumber").text(divnum)  <br />         });                            <br />     });  <br /></script>

請注意，div1沒有向右滑動的手勢，因為這是第一頁，div4沒有向左滑動的手勢，因為這是最後一頁。

希望本文所述對大家的jQueryMobile程式設計有所幫助。