jQuery Mobile - Événement de balayage tactile

La description

Se déclenche lorsque l'utilisateur fait glisser horizontalement plus de 30 pixels sur un élément à l'aide de l' ID de la page pour spécifier un événement et que la méthode on () attache les gestionnaires d'événements.

Exemple

L'exemple suivant décrit l'utilisation de l' événement swipe dans jQuery Mobile Framework.

<!DOCTYPE html>
   <head>
      <title>Swipe Event</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $(document).on("pagecreate","#page1",function() {
            $("p").on("swipe",function() {
               $("span").text("swipe event occurred!!!");
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>It will display the text when you swipe here.</p>
            <span style = "color:orange"></span>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      
      </div>
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus sous jqm_touch_swipe_event.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML en tant que http: //localhost/jqm_touch_swipe_event.html et la sortie suivante sera affichée.