Lors de la création de sites Web réactifs et dynamiques, le développeur doit également gérer les gestes mobiles, comme le pincement, le tapotement et le glissement. Ces gestes sont gérés par des langages de développement mobile comme « battement ' ou ' réagir natif » et JavaScript. Les autres programmes Web ne gèrent pas ce type d'événement. Heureusement! Avec l'aide de ' événement tactile ”, ces événements ou gestes peuvent également être gérés.
Ce blog illustrera le processus d'utilisation du plugin d'événement jQuery touch pour mobiles.
Comment utiliser le plugin jQuery Touch Events pour mobiles ?
jQuery résume les différences entre les événements tactiles et les événements mobiles pour utiliser des API ou des plugins cohérents comme « événement tactile ». Il existe plusieurs événements fournis par ce plugin qui sont indiqués ci-dessous sous forme de tableau :
| canard à fouetter | Appelle une fonction spécifique à la fin du balayage sur un élément. |
| démarrage du défilement | Appelle une fonction spécifique au début du défilement sur l'élément sélectionné. |
| fin de défilement | Appelle une fonction spécifique à la fin du défilement sur l'élément. |
| changement d'orientation | Déclenche une fonction lorsque l'orientation de l'appareil ou du mobile est modifiée, par exemple en se déplaçant en portrait à partir de la disposition paysage. |
Syntaxe
La syntaxe des événements tactiles jQuery est indiquée ci-dessous :
$ ( 'ce' ) .touchEvent ( fonction ( ) {
// votre code
} )
Dans la syntaxe ci-dessus :
-
- Le ' ce ' est le sélecteur qui est une action en tant qu'appelant d'action ou élément sélectionné.
- Le ' touchEvent » est le nom d'événement spécifique utilisé, il peut s'agir d'un événement à partir du tableau indiqué ci-dessus.
- Le ' fonction() ' est la fonction personnalisée qui va être exécutée par l'événement tactile fourni.
Voyons maintenant quelques exemples pour une meilleure compréhension des événements tactiles.
Exemple 1 : Utilisation de Tap et DoubleTap
Dans cet exemple, le « touchEvent ' événement ' robinet ' et ' tapez deux fois ' va être utilisé pour invoquer ou exécuter une fonction sur un élément sélectionné :
< HTML >< tête >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > scénario >
< scénario src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
scénario >
tête >
< corps >
< h3 style = 'couleur : bleu cadet ;' > Linux h3 >
< bouton identifiant = 't' > Robinet bouton >
< bouton identifiant = 'dt' > Tapez deux fois bouton >
< p identifiant = 'cible' > L'exemple d'événements DoubleTap et Tap Touch. p >
< scénario >
$ ( '#t' ) .robinet ( fonction ( ) {
$ ( '#cible' ) .cacher ( ) ;
} )
$ ( '#dt' ) .tapez deux fois ( fonction ( ) {
$ ( '#cible' ) .montrer ( ) ;
} )
scénario >
corps >
HTML >
L'explication du code ci-dessus :
-
- Premièrement, le CDN » Réseau de diffusion de contenu ' pour les événements jQuery et touch va être inséré dans le '
» pour les rendre accessibles. Les CDN peuvent être trouvés sur le site officiel de jQuery et en visitant le cdnjs respectivement. - Ensuite, deux éléments de bouton sont créés avec un identifiant de « t ' et ' dt ». Créez également un « p ' élément avec un identifiant de ' cible ». L'action de l'événement touch va être effectuée sur cet élément.
- À l'intérieur de '
- Premièrement, le CDN » Réseau de diffusion de contenu ' pour les événements jQuery et touch va être inséré dans le '