En la creación de sitios web dinámicos y responsivos, el desarrollador debe manejar los gestos móviles, así como pellizcar, tocar y deslizar. Estos gestos son manejados por lenguajes de desarrollo móvil como ' aleteo ' o ' reaccionar nativo ”y JavaScript. Otra programación web no maneja este tipo de eventos. ¡Afortunadamente! Con la ayuda de jQuery ' evento táctil ”, estos eventos o gestos también se pueden manejar.
Este blog ilustrará el proceso para utilizar el complemento de eventos jQuery touch para móviles.
¿Cómo utilizar el complemento jQuery Touch Events para móviles?
jQuery abstrae las diferencias entre eventos táctiles y eventos móviles para utilizar API o complementos consistentes como ' evento táctil ”. Hay varios eventos proporcionados por este complemento que se indican a continuación en forma de tabla:
| pato azotador | Invoca una función específica al final de deslizar el dedo sobre un elemento. |
| inicio de desplazamiento | Invoca una función específica al inicio del desplazamiento en el elemento seleccionado. |
| final de desplazamiento | Invoca una función específica al final del desplazamiento del elemento. |
| cambio de orientación | Activa una función cuando la orientación del dispositivo o móvil cambia, como moverse en vertical desde el diseño horizontal. |
Sintaxis
La sintaxis de los eventos jQuery touch se indica a continuación:
$ ( 'este' ) .touchEvent ( función ( ) {
// tu codigo
} )
En la sintaxis anterior:
-
- El ' este 'Es el selector que es una acción como llamador de acción o elemento seleccionado.
- El ' evento táctil ' es el nombre del evento específico que se está utilizando, puede provenir de la tabla indicada anteriormente.
- El ' función() 'Es la función personalizada que ejecutará el evento táctil proporcionado.
Ahora, veamos un par de ejemplos para comprender mejor los eventos táctiles.
Ejemplo 1: uso de Tap y DoubleTap
En este ejemplo, el “ evento táctil ' evento ' grifo ' y ' doble toque ”se utilizará para invocar o realizar alguna función sobre un elemento seleccionado:
< HTML >< cabeza >
< fuente de script = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > guion >
< guion src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
guion >
cabeza >
< cuerpo >
< h3 estilo = 'color: azul cadete;' > linux h3 >
< botón identificación = 't' > Grifo botón >
< botón identificación = 'dt' > Doble toque botón >
< pag identificación = 'objetivo' > El ejemplo de eventos DoubleTap y Tap Touch. pag >
< guion >
$ ( '#t' ) .grifo ( función ( ) {
$ ( '#objetivo' ) .esconder ( ) ;
} )
$ ( '#dt' ) .doble toque ( función ( ) {
$ ( '#objetivo' ) .espectáculo ( ) ;
} )
guion >
cuerpo >
HTML >
La explicación del código anterior:
-
- Primero, el CDN” Red de entrega de contenidos 'para jQuery y eventos táctiles se insertará dentro del'
”Etiqueta para hacerlos accesibles. Los CDN se pueden encontrar en el sitio oficial. de jQuery y visitando cdnjs respectivamente. - A continuación, se crean dos elementos de botón con una identificación de ' t ' y ' dt ”. Además, cree un “ pag 'elemento con una identificación de' objetivo ”. La acción del evento táctil se realizará sobre este elemento.
- Dentro de '
'etiqueta, seleccione el elemento con una identificación de ' t ' y adjunte el ' grifo ” toque el evento con él. Este evento selecciona otro elemento html con una identificación de ' objetivo ” y aplica el “ esconder() 'Método en él. - Además, seleccione el botón ' dt 'elemento y aplicar el' doble toque ” toque el evento y de la misma manera aplique el “ espectáculo() 'Método en el' objetivo ”elemento de identificación.
- Primero, el CDN” Red de entrega de contenidos 'para jQuery y eventos táctiles se insertará dentro del'
El resultado generado después de la compilación del código se muestra a continuación:
El resultado anterior muestra que las acciones se han realizado en eventos táctiles de 'toque' y 'doble toque'.
Ejemplo 2: uso de eventos táctiles Swipe y Swipeend
En este ejemplo, la implementación del “ golpe fuerte ' y ' pato azotador Se demostrarán eventos táctiles:
< guion >$ ( '#t' ) .golpe fuerte ( función ( ) {
$ ( '#objetivo' ) .esconder ( ) ;
} )
$ ( '#t' ) .deslizando pato ( función ( ) {
$ ( '#objetivo' ) .esconder ( ) ;
} )
guion >
La descripción del código jQuery anterior es la siguiente:
-
- Primero, el elemento elegido se selecciona a través de su id “ t ' y el ' golpe fuerte ”El evento está adjunto. Este evento activa una función y la función activada selecciona el elemento objetivo a través de la identificación ' objetivo ” y aplica el “ esconder() ”Método para hacer que su contenido sea invisible.
- A continuación, el “ pato azotador 'El evento se aplica al mismo elemento y su función aplica el' espectáculo() 'Método sobre el elemento seleccionado con una identificación de' objetivo ”para que el contenido sea visible cuando finalice el evento de deslizamiento.
El resultado del código anterior se genera como:
El resultado muestra que el contenido del elemento objetivo se oculta en el momento de deslizar el dedo y aparece cuando finaliza el evento de deslizar.
Ejemplo 3: uso de eventos táctiles scrollstart y scrollend
En este caso, el “ inicio de desplazamiento ' y ' final de desplazamiento Se implementarán eventos táctiles:
< guion >$ ( '#t' ) .scrollstart ( función ( ) {
$ ( '#objetivo' ) .esconder ( ) ;
} )
$ ( '#t' ) .desplazarse ( función ( ) {
$ ( '#objetivo' ) .espectáculo ( ) ;
} )
guion >
La explicación del código anterior se establece como:
-
- El único cambio en este ejemplo es el uso de ' inicio de desplazamiento ' y ' final de desplazamiento “eventos a realizar” esconder() ' y ' espectáculo() ”métodos sobre un elemento y el resto del código seguirá siendo el mismo que en el ejemplo anterior.
- El texto de destino se oculta al inicio o durante el desplazamiento y se vuelve visible cuando finaliza el desplazamiento.
El resultado generado después de la compilación del código anterior se muestra a continuación:
El resultado muestra que el contenido del elemento está oculto en el momento del desplazamiento y se vuelve visible cuando finaliza el desplazamiento.
Este blog explica los complementos de eventos jQuery Touch para dispositivos móviles.
Conclusión
El jQuery” evento táctil 'El complemento para dispositivos móviles permite a jQuery agregar eventos que manejan específicamente los eventos que ocurren en móviles táctiles, como deslizar, tocar, cambiar de orientación, etc. Los eventos proporcionados por este complemento se implementan como el tradicional ' al hacer clic ”u otros eventos. Al utilizar este complemento, el desarrollador puede aplicar fácilmente ciertas funciones según la interacción del usuario con el móvil. Este blog ha explicado la conexión de eventos jQuery touch para dispositivos móviles.