So verwenden Sie jQueryMobile, um einen Gleitseiteneffekt zu erzielen_jquery

Das Beispiel in diesem Artikel beschreibt, wie Sie jQueryMobile verwenden, um den Effekt des gleitenden Umblätterns zu erzielen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Wischgesten sind auf Mobilgeräten sehr beliebt und kommen beim Wischen zum Umblättern auf Mobilgeräten sehr häufig vor

Obwohl diese Funktion in jQueryMobile implementiert werden kann, stimme ich persönlich den Ansichten im vorherigen Artikel zu [Analyse der Schwierigkeit des Ziehens von Aktionen in jQuery-Mobilbrowsern], da dies in einem mobilen Browser erfolgt ist keine unabhängige APP von Android. Verwenden Sie daher nicht häufig andere Gesten für Mobilgeräte als das Klicken, um Konflikte mit den Gesten des mobilen Browsers und des mobilen Systems selbst zu vermeiden.

Wie kann man also mit jQueryMobile den Effekt des gleitenden Umblätterns erzielen?

1. Grundlegende Ziele

Realisieren Sie die Funktion zum Umblättern mit Schiebegesten auf der jQueryMobile-Frame-Seite im mobilen Browser, wie unten gezeigt:

Und zeichnet die Anzahl der Seiten auf der aktuellen Seite auf, die automatisch erhöht und verringert wird, wenn der Benutzer gleitet.

2. Produktionsprozess

Bezüglich der Anordnung der JqueryMobile-Schnittstelle werde ich nicht näher darauf eingehen. Weitere Informationen finden Sie im vorherigen Artikel [Helloworld und Seitenwechselmethoden von jQueryMobile]

Die folgenden Codekommentare beschreiben hauptsächlich, wie die obige Seite durch die Verarbeitung der von JqueryMobile, W3C gekapselten Schiebegesten jQuery Mobile Swipeleft und jQuery Mobile Swiperight „jQuery Mobile Touch Events“ implementiert wird. Die Beschreibung hierfür ist problematisch , und der experimentelle Code stimmt nicht mit dem angegebenen Code überein:

Code kopieren Der Code lautet wie folgt:

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 

 
   

Title

 
 
 

 
 
 

 
     

 
       

你好1

 
     

 
     

 
       

你好2

 
     

 
     

 
       

你好3

 
     

 
     

 
       

你好4

 
     

 
       
     

 
        /4 
     

 
 

 
 
 

 
     

 
     

 
       
• a
 
       
• b
 
       
• c
 
     

 
   

 
     
 

  

  

<script> /* Definieren Sie im JQuery-Teil zunächst eine Variable, die aufzeichnet, wie viele Seiten umgedreht wurden */ <br> var divnum=1; <br> /* Äquivalent zu .innerhtml=""; jquery muss den Wert eines Knotens wie folgt festlegen */ <br> $("#divnumber").text(divnum) <br> /* Touch auf #mypage aktivieren */ <br> $(document).on("pageinit","#mypage",function(){ <br> /* Wenn Sie den nicht leeren Teil von div1 nach links schieben, wird div1 ausgeblendet, div2 wird angezeigt, der Seitenzähler ist 1 und der Inline-Text von divnumber wird aktualisiert */ <br>            $("#div1").on("swipeleft",function(){ <br>                $("#div1").hide("fast");                 $("#div2").show("fast");               divnum=divnum 1;                   $("#divnumber").text(divnum) <br>          });  <br> /* Wenn Sie den nicht leeren Teil von div2 nach rechts schieben, wird div1 angezeigt, div2 wird ausgeblendet, der Seitenzähler beträgt -1 und der Inline-Text von divnumber wird aktualisiert */ <br>              $("#div2").on("swiperight",function(){                                                        $("#div1").show("fast");                $("#div2").hide("fast");             divnum=divnum-1;                   $("#divnumber").text(divnum) <br>          });  <br> /* Wenn Sie den nicht leeren Teil von div2 nach links schieben, wird div2 ausgeblendet, div3 wird angezeigt, der Seitenzähler ist 1 und der Inline-Text von divnumber wird aktualisiert usw. */ <br>           $("#div2").on("swipeleft",function(){ <br>                $("#div2").hide("fast");                $("#div3").show("fast");               divnum=divnum 1;                   $("#divnumber").text(divnum) <br>          });  <br>            $("#div3").on("swiperight",function(){ <br>                 $("#div2").show("fast");                 $("#div3").hide("fast");             divnum=divnum-1;                   $("#divnumber").text(divnum) <br>          });  <br>            $("#div3").on("swipeleft",function(){ <br>                 $("#div3").hide("fast");                $("#div4").show("fast");               divnum=divnum 1;                   $("#divnumber").text(divnum) <br>          });  <br>              $("#div4").on("swiperright",function(){                                                      $("#div3").show("fast");                $("#div4").hide("fast");             divnum=divnum-1;                   $("#divnumber").text(divnum) <br>                                                        }); <br></script>

Veuillez noter que div1 n'a pas de geste de balayage vers la droite car il s'agit de la première page, et div4 n'a pas de geste de balayage vers la gauche car c'est la dernière page.

J'espère que cet article sera utile à la conception du programme jQueryMobile de chacun.