jQueryMobile を使用してスライド ページめくり効果を実現する方法_jquery

この記事の例では、jQueryMobile を使用してスライドによるページめくり効果を実現する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

スワイプ ジェスチャはモバイル デバイスで非常に人気があり、モバイル デバイスでスワイプしてページをめくるのは非常に一般的です

この機能は jQueryMobile で実装できますが、これはモバイル ブラウザーのブラウジングで行われるため、個人的には前の記事 [jQuery モバイル ブラウザーでのドラッグ アクションの難しさの分析] の見解に同意します。は Android の独立した APP ではないため、モバイル ブラウザやモバイル システム自体のジェスチャとの競合を避けるために、クリック以外のモバイル デバイスのジェスチャを頻繁に使用しないでください。

それでは、jQueryMobile を使用してスライドによるページめくりの効果を実現するにはどうすればよいでしょうか?

1. 基本的な目標

以下に示すように、モバイル ブラウザーの jQueryMobile フレーム ページでスライド ジェスチャ ページめくり機能を実現します。

現在のページのページ数を記録します。ユーザーがスライドすると自動的に増減します。

2. 製造工程

JqueryMobileのインターフェースの整え方については、詳細は割愛しますので、詳しくは以前の記事【jQueryMobileのHelloworldとページ切り替え方法】

をご覧ください。

次のコード コメントは主に、JqueryMobile、W3C「jQuery Mobile Touch Events」によってカプセル化されたスライド ジェスチャ jQuery Mobile Swipeleft および jQuery Mobile Swiperight を処理することによって、上記のページを実装する方法を説明しています。この記述には問題があります。実験的なコードは次のコードと一致しません:

コードをコピー コードは次のとおりです:

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 

 
   

Title

 
 
 

 
 
 

 
     

 
       

你好1

 
     

 
     

 
       

你好2

 
     

 
     

 
       

你好3

 
     

 
     

 
       

你好4

 
     

 
       
     

 
        /4 
     

 
 

 
 
 

 
     

 
     

 
       
• a
 
       
• b
 
       
• c
 
     

 
   

 
     
 

  

  

<スクリプト>
/* jquery 部分で、まずめくったページ数を記録する変数を定義します */
var divnum=1; /* .innerhtml="" と同等、jquery は次のようにノードの値を設定する必要があります */
; $("#divnumber").text(divnum)
/* #mypage でタッチを有効にする */
$(document).on("pageinit","#mypage",function(){
/* div1 の空白以外の部分を左にスライドすると、div1 が非表示になり、div2 が表示され、ページ カウンタが 1 になり、divnumber のインライン テキストが更新されます */
$("#div1").on("swipeleft",function(){
$("#div1").hide("fast"); $("#div2").show("fast");
divnum=divnum 1;
$("#divnumber").text(divnum)
});
/* div2 の空白以外の部分を右にスライドすると、div1 が表示され、div2 が非表示になり、ページ カウンタが -1 になり、divnumber のインライン テキストが更新されます */
$("#div2").on("swiperight",function(){ $("#div1").show("fast");
$("#div2").hide("fast"); divnum=divnum-1;
$("#divnumber").text(divnum)
});
/* div2 の空白以外の部分を左にスライドすると、div2 が非表示になり、div3 が表示され、ページ カウンタが 1 になり、divnumber のインライン テキストが更新されます (以下同様) */
$("#div2").on("swipeleft",function(){
$("#div2").hide("fast"); $("#div3").show("fast");
divnum=divnum 1;
$("#divnumber").text(divnum)
});
$("#div3").on("swipright",function(){
$("#div2").show("fast");
$("#div3").hide("fast"); divnum=divnum-1;
$("#divnumber").text(divnum)
});
$("#div3").on("swipeleft",function(){
$("#div3").hide("fast"); $("#div4").show("fast");
divnum=divnum 1;
$("#divnumber").text(divnum)
});
$("#div4").on("swiperight",function(){ $("#div3").show("fast"); $("#div4").hide("fast"); divnum=divnum-1;
$("#divnumber").text(divnum)
                                                          });

div1 には最初のページであるため右にスワイプのジェスチャがなく、div4 には最後のページであるため左にスワイプのジェスチャがないことに注意してください。

この記事が皆さんの jQueryMobile プログラム設計に役立つことを願っています。