jQuery Mobile - Événement Touch Taphold

La description

Se déclenche lorsque l'utilisateur appuie sur un élément et maintient pendant quelques secondes 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 taphold dans jQuery Mobile Framework.

<!DOCTYPE html>
   <head>
      <title>Taphold 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("tap",function() {
               $(this).hide();
            });
         });
      </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>This line will disappear, if you tap on it.</p>
         </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_taphold_event.html fichier dans le dossier racine de votre serveur.

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