Ved oprettelsen af dynamiske responsive websteder skal udvikleren håndtere mobile bevægelser såvel som at knibe, trykke og stryge. Disse bevægelser håndteres af mobiludviklingssprog som ' flagre ' eller ' reagere indfødt ” og JavaScript. Anden webprogrammering håndterer ikke denne form for begivenhed. Heldigvis! Ved hjælp af jQuery's ' berøringsbegivenhed ” plugin, kan disse hændelser eller bevægelser også håndteres.
Denne blog vil illustrere processen med at bruge jQuery touch-begivenhedsplugin til mobiler.
Hvordan bruger man jQuery Touch Events Plugin til mobiler?
jQuery abstraherer forskellene mellem berøringsbegivenheder og mobilbegivenheder for at bruge konsistente API'er eller plugins som ' berøringsbegivenhed ”. Der er flere begivenheder leveret af dette plugin, som er angivet nedenfor i tabelformen:
| piske and | Starter en bestemt funktion i slutningen af strygningen over et element. |
| rullestart | Kalder en specifik funktion i starten af rulningen på det valgte element. |
| scrollend | Kalder en specifik funktion i slutningen af rulningen på elementet. |
| orienteringsændring | Udløser en funktion, når orienteringen af enheden eller mobilen ændres som at bevæge sig i portrættet fra det liggende layout. |
Syntaks
Syntaksen for jQuery berøringshændelser er angivet nedenfor:
$ ( 'det her' ) .touchEvent ( func ( ) {
// din kode
} )
I ovenstående syntaks:
-
- Det ' det her ” er vælgeren, som er en handling som handlingskald eller valgt element.
- Det ' touchBegivenhed ” er det specifikke hændelsesnavn, der bliver brugt, det kan hændelse fra ovennævnte tabel.
- Det ' func() ” er den brugerdefinerede funktion, der vil blive udført af den angivne berøringshændelse.
Lad os nu besøge et par eksempler for en bedre forståelse af berøringshændelser.
Eksempel 1: Brug af Tap og DoubleTap
I dette eksempel er ' touchBegivenhed ' begivenhed ' tryk ' og ' Dobbeltklik ' vil blive brugt til at påkalde eller udføre en funktion over et valgt element:
< html >< hoved >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > manuskript >
< manuskript src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
manuskript >
hoved >
< legeme >
< h3 stil = 'farve: kadetblå;' > Linux h3 >
< knap id = 't' > Tryk på knap >
< knap id = 'dt' > Dobbeltklik knap >
< s id = 'mål' > Eksempelet DoubleTap and Tap Touch Events. s >
< manuskript >
$ ( '#t' ) .tryk ( fungere ( ) {
$ ( '#mål' ) .skjule ( ) ;
} )
$ ( '#dt' ) .Dobbeltklik ( fungere ( ) {
$ ( '#mål' ) .at vise ( ) ;
} )
manuskript >
legeme >
html >
Forklaringen af ovenstående kode:
-
- For det første CDN ' Indholdsleveringsnetværk ' til jQuery- og touch-begivenheder vil blive indsat i '
” tag for at gøre dem tilgængelige. CDN'erne kan findes på den officielle af jQuery og via at besøge cdnjs henholdsvis. - Dernæst oprettes to knapelementer med et id på ' t ' og ' dt ”. Opret også en ' s ' element med et id på ' mål ”. Handlingen af berøringshændelsen vil blive udført på dette element.
- Inde i '
- For det første CDN ' Indholdsleveringsnetværk ' til jQuery- og touch-begivenheder vil blive indsat i '