jQuery Mobile - Événement Touch Swiperight

La description

Se déclenche lorsque l'utilisateur fait glisser plus de 30 pixels sur un élément dans la bonne direction en utilisant l' id de la page pour spécifier un événement et la méthode on () attache les gestionnaires d'événements.

Exemple

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

<!DOCTYPE html>
   <head>
      <title>Swiperight 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("swiperight",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 right side.</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_swiperight_event.html fichier dans le dossier racine de votre serveur.

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