jQuery Mobile: evento táctil de deslizamiento hacia la izquierda

Descripción

Se activa cuando el usuario arrastra más de 30px sobre un elemento en la dirección izquierda usando el id de la página para especificar un evento y el método on () adjunta los controladores de eventos.

Ejemplo

El siguiente ejemplo describe el uso del evento swipeleft en jQuery Mobile Framework.

<!DOCTYPE html>
   <head>
      <title>Swipeleft 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("swipeleft",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 left side.</p>
            <span style = "color:orange"></span>
         </div>

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

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como jqm_touch_swipeleft_event.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/jqm_touch_swipeleft_event.html y se mostrará el siguiente resultado.

↰ Previous page