En la creació de llocs web responsius dinàmics, el desenvolupador ha de gestionar els gestos mòbils, com ara pessigar, tocar i lliscar. Aquests gestos són gestionats per llenguatges de desenvolupament mòbil com ' aleteig ' o ' reaccionar nadiu ” i JavaScript. Altres programacions web no gestionen aquest tipus d'esdeveniments. Per sort! Amb l'ajuda de jQuery ' esdeveniment tàctil ”, aquests esdeveniments o gestos també es poden gestionar.
Aquest bloc il·lustrarà el procés per utilitzar el connector d'esdeveniments tàctils de jQuery per a mòbils.
Com utilitzar el connector d'esdeveniments jQuery Touch per a mòbils?
jQuery resumeix les diferències entre els esdeveniments tàctils i els esdeveniments mòbils per utilitzar API o complements coherents com ' esdeveniment tàctil ”. Hi ha diversos esdeveniments proporcionats per aquest connector que s'indiquen a continuació en forma de taula:
| ànec assotant | Invoca una funció específica al final del lliscament sobre un element. |
| scrollstart | Invoca una funció específica a l'inici del desplaçament de l'element seleccionat. |
| desplaçar-se | Invoca una funció específica al final del desplaçament de l'element. |
| canvi d'orientació | Activa una funció quan es canvia l'orientació del dispositiu o del mòbil, com si es mogués al retrat des del disseny horitzontal. |
Sintaxi
La sintaxi dels esdeveniments tàctils de jQuery s'indica a continuació:
$ ( 'això' ) .touchEvent ( func ( ) {
// el teu codi
} )
En la sintaxi anterior:
-
- El ' això ” és el selector que és una acció com a trucador d'acció o element seleccionat.
- El ' touchEvent ” és el nom de l'esdeveniment específic que s'està utilitzant, pot esdeveniment de la taula indicada anteriorment.
- El ' funció () ” és la funció personalitzada que s'executarà mitjançant l'esdeveniment tàctil proporcionat.
Ara, visitem un parell d'exemples per entendre millor els esdeveniments tàctils.
Exemple 1: ús de Tap i DoubleTap
En aquest exemple, el ' touchEvent 'esdeveniment' aixeta ' i ' doble toc ” s'utilitzarà per invocar o realitzar alguna funció sobre un element seleccionat:
< html >< cap >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > guió >
< guió src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
guió >
cap >
< cos >
< h3 estil = 'color: blau cadet;' > Linux h3 >
< botó id = 't' > Aixeta botó >
< botó id = 'dt' > Doble toc botó >
< pàg id = 'objectiu' > L'exemple d'esdeveniments DoubleTap i Tap Touch. pàg >
< guió >
$ ( '#t' ) .aixeta ( funció ( ) {
$ ( '#objectiu' ) .amagar ( ) ;
} )
$ ( '#dt' ) .doble toc ( funció ( ) {
$ ( '#objectiu' ) .espectacle ( ) ;
} )
guió >
cos >
html >
L'explicació del codi anterior:
-
- En primer lloc, el CDN ' Xarxa de distribució de continguts ' per a jQuery i esdeveniments tàctils s'inserirà dins del '
” per fer-los accessibles. Els CDN es poden trobar a l'oficial de jQuery i visitant els cdnjs respectivament. - A continuació, es creen dos elements de botó amb un identificador de ' t ' i ' dt ”. A més, creeu un ' pàg ” element amb un identificador de “ objectiu ”. L'acció de l'esdeveniment tàctil es realitzarà en aquest element.
- Dins del '
- En primer lloc, el CDN ' Xarxa de distribució de continguts ' per a jQuery i esdeveniments tàctils s'inserirà dins del '