Comment utiliser jQueryMobile pour réaliser une rotation de page coulissante effect_jquery

L'exemple de cet article décrit comment utiliser jQueryMobile pour obtenir l'effet de rotation de page coulissante. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Les gestes de balayage sont très populaires sur les appareils mobiles et sont très courants pour tourner les pages sur les appareils mobiles

Bien que cette fonction puisse être implémentée dans jQueryMobile, je suis personnellement d'accord avec les points de vue de l'article précédent [Analyse de la difficulté de faire glisser des actions dans les navigateurs mobiles jQuery], car il s'agit d'un navigateur mobile. n'est pas une application indépendante d'Android, n'utilisez donc pas fréquemment de gestes sur l'appareil mobile autres que cliquer pour éviter tout conflit avec les gestes du navigateur mobile et du système mobile lui-même.

Alors, comment utiliser jQueryMobile pour obtenir l'effet de tourner les pages coulissantes ?

1. Objectifs de base

Réalisez la fonction de rotation de page par geste coulissant dans la page de cadre jQueryMobile dans le navigateur mobile, comme indiqué ci-dessous :

Et enregistre le nombre de pages sur la page actuelle, qui augmentera et diminuera automatiquement au fur et à mesure que l'utilisateur glisse.

2. Processus de production

Concernant la façon d'organiser l'interface de JqueryMobile, je n'entrerai pas dans les détails. Pour plus de détails, veuillez lire l'article précédent [Helloworld et méthodes de changement de page de jQueryMobile]

.

Les commentaires de code suivants décrivent principalement comment implémenter la page ci-dessus en traitant les gestes coulissants jQuery Mobile Swipeleft et jQuery Mobile Swiperight encapsulés par JqueryMobile, W3C "jQuery Mobile Touch Events" La description de ceci est problématique , et le code expérimental n'est pas cohérent avec le code donné :

Copier le code Le code est le suivant :

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 

 
   

Title

 
 
 

 
 
 

 
     

 
       

你好1

 
     

 
     

 
       

你好2

 
     

 
     

 
       

你好3

 
     

 
     

 
       

你好4

 
     

 
       
     

 
        /4 
     

 
 

 
 
 

 
     

 
     

 
       
• a
 
       
• b
 
       
• c
 
     

 
   

 
     
 

  

  

<script> /* Dans la partie jquery, définissez d'abord une variable qui enregistre le nombre de pages tournées */ <br> var numérodiv=1; /* Équivalent à .innerhtml=""; jquery doit définir la valeur d'un nœud comme celui-ci */ <br> $("#divnumber").text(divnum) <br> /* Activer le toucher sur #mapage */ <br> $(document).on("pageinit","#mapage",function(){ <br> /* Si vous faites glisser la partie non vide de div1 vers la gauche, alors div1 sera masqué, div2 sera affiché et le compteur de pages sera 1, et le texte en ligne de divnumber sera mis à jour */ <br>            $("#div1").on("swipeleft",function(){ <br>                $("#div1").hide("fast");                 $("#div2").show("fast");               divnum=divnum 1 ;  <br>                  $("#divnumber").text(divnum) <br>          });   /* Si vous faites glisser la partie non vide de div2 vers la droite, alors div1 sera affiché, div2 sera masqué et le compteur de pages sera -1, et le texte en ligne de divnumber sera mis à jour */ <br>              $("#div2").on("swiperight",function(){                                                        $("#div1").show("fast");                $("#div2").hide("fast");             divnum=divnum-1;  <br>                  $("#divnumber").text(divnum) <br>          });   /* Si vous faites glisser la partie non vide de div2 vers la gauche, alors div2 sera masqué, div3 sera affiché et le compteur de pages sera 1, et le texte en ligne de divnumber sera mis à jour, et ainsi de suite */ <br>           $("#div2").on("swipeleft",function(){ <br>                $("#div2").hide("fast");                $("#div3").show("fast");               divnum=divnum 1 ;  <br>                  $("#divnumber").text(divnum) <br>          });              $("#div3").on("swiperight",function(){ <br>                 $("#div2").show("fast");                 $("#div3").hide("fast");             divnum=divnum-1;  <br>                  $("#divnumber").text(divnum) <br>          });              $("#div3").on("swipeleft",function(){ <br>                 $("#div3").hide("fast");                $("#div4").show("rapide");               divnum=divnum 1 ;  <br>                  $("#divnumber").text(divnum) <br>          });                $("#div4").on("swiperight",function(){                                                       $("#div3").show("fast");                $("#div4").hide("rapide");             divnum=divnum-1;  <br>                  $("#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.