I etableringen av dynamiske responsive nettsteder, må utvikleren håndtere mobile bevegelser i tillegg til å knipe, trykke og sveipe. Disse bevegelsene håndteres av mobilutviklingsspråk som ' flagre ' eller ' reagere innfødt ' og JavaScript. Annen webprogrammering håndterer ikke denne typen hendelser. Heldigvis! Ved hjelp av jQuerys ' berøringshendelse ” plugin, kan disse hendelsene eller bevegelsene også håndteres.
Denne bloggen vil illustrere prosessen for å bruke jQuery berøringshendelsesplugin for mobiler.
Hvordan bruke jQuery Touch Events Plugin for mobiler?
jQuery abstraherer forskjellene mellom berøringshendelser og mobile hendelser for å bruke konsistente APIer eller plugins som ' berøringshendelse '. Det er flere hendelser levert av dette pluginet som er angitt nedenfor i tabellform:
| piske and | Starter en bestemt funksjon på slutten av sveipet over et element. |
| rullestart | Starter en spesifikk funksjon ved starten av rullingen på det valgte elementet. |
| scrollend | Påkaller en spesifikk funksjon på slutten av rullingen på elementet. |
| retningsendring | Utløser en funksjon når orienteringen til enheten eller mobilen endres som å bevege seg i portrett fra landskapsoppsettet. |
Syntaks
Syntaksen for jQuery berøringshendelser er angitt nedenfor:
$ ( 'dette' ) .touchEvent ( func ( ) {
// koden din
} )
I syntaksen ovenfor:
-
- « dette ” er velgeren som er en handling som handlingsanrop eller valgt element.
- « touchEvent ” er det spesifikke hendelsesnavnet som brukes, det kan hendelse fra tabellen ovenfor.
- « func() ” er den tilpassede funksjonen som skal utføres av den angitte berøringshendelsen.
La oss nå se et par eksempler for en bedre forståelse av berøringshendelser.
Eksempel 1: Bruk av Tap og DoubleTap
I dette eksemplet er ' touchEvent ' begivenhet ' trykk ' og ' dobbelttrykk ' skal brukes til å påkalle eller utføre en funksjon over et valgt element:
< html >< hode >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > manus >
< manus src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
manus >
hode >
< kropp >
< h3 stil = 'farge: kadettblå;' > Linux h3 >
< knapp id = 't' > Trykk på knapp >
< knapp id = 'dt' > Dobbelttrykk knapp >
< s id = 'mål' > Eksempelet DoubleTap and Tap Touch Events. s >
< manus >
$ ( '#t' ) .trykk ( funksjon ( ) {
$ ( '#mål' ) .gjemme seg ( ) ;
} )
$ ( '#dt' ) .dobbelttrykk ( funksjon ( ) {
$ ( '#mål' ) .forestilling ( ) ;
} )
manus >
kropp >
html >
Forklaringen av koden ovenfor:
-
- Først CDN ' Innholdsleveringsnettverk ' for jQuery og berøringshendelser kommer til å bli satt inn i '
'-taggen for å gjøre dem tilgjengelige. CDN-ene finner du på den offisielle av jQuery og via å besøke cdnjs hhv. - Deretter opprettes to knappeelementer med en id på ' t ' og ' dt '. Lag også en ' s element med en id på ' mål '. Handlingen av berøringshendelsen skal utføres på dette elementet.
- Inne i '
- Først CDN ' Innholdsleveringsnettverk ' for jQuery og berøringshendelser kommer til å bli satt inn i '