Vid skapandet av dynamiska responsiva webbplatser måste utvecklaren hantera mobila gester såväl som att nypa, knacka och svepa. Dessa gester hanteras av mobila utvecklingsspråk som ' fladdra ' eller ' reagera infödd ” och JavaScript. Annan webbprogrammering hanterar inte den här typen av händelser. Lyckligtvis! Med hjälp av jQuerys ' beröringshändelse ” plugin, kan dessa händelser eller gester också hanteras.
Den här bloggen kommer att illustrera processen för att använda jQuery touch-händelsplugin för mobiler.
Hur man använder jQuery Touch Events Plugin för mobiler?
jQuery sammanfattar skillnaderna mellan beröringshändelser och mobilhändelser för att använda konsekventa API:er eller plugins som ' beröringshändelse ”. Det finns flera händelser som tillhandahålls av detta plugin som anges nedan i tabellform:
| vispande anka | Anropar en specifik funktion i slutet av svepningen över ett element. |
| scrollstart | Anropar en specifik funktion i början av rullningen på det valda elementet. |
| scrollend | Anropar en specifik funktion i slutet av rullningen på elementet. |
| orienteringsändring | Avfyrar en funktion när enhetens eller mobilens orientering ändras som att flytta i porträttet från liggande layout. |
Syntax
Syntaxen för jQuery touch-händelser anges nedan:
$ ( 'detta' ) .touchEvent ( func ( ) {
// din kod
} )
I ovanstående syntax:
-
- den ' detta ” är väljaren som är en åtgärd som en handlingsanropare eller valt element.
- den ' touchEvent ” är det specifika händelsenamnet som används, det kan ske från den ovan angivna tabellen.
- den ' func() ” är den anpassade funktionen som kommer att exekveras av den angivna beröringshändelsen.
Låt oss nu besöka ett par exempel för en bättre förståelse av beröringshändelser.
Exempel 1: Användning av Tap och DoubleTap
I det här exemplet är ' touchEvent 'händelse' knacka ' och ' dubbelklicka ' kommer att användas för att anropa eller utföra någon funktion över ett valt element:
< html >< huvud >
< 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 >
huvud >
< kropp >
< h3 stil = 'färg: kadettblå;' > Linux h3 >
< knapp id = 't' > Knacka knapp >
< knapp id = 'dt' > Dubbelklicka knapp >
< sid id = 'mål' > Exempel på DoubleTap and Tap Touch Events. sid >
< manus >
$ ( '#t' ) .knacka ( fungera ( ) {
$ ( '#mål' ) .Dölj ( ) ;
} )
$ ( '#dt' ) .dubbelklicka ( fungera ( ) {
$ ( '#mål' ) .show ( ) ;
} )
manus >
kropp >
html >
Förklaringen av ovanstående kod:
-
- Först, CDN ' Nätverk för innehållsleverans ' för jQuery och touch-händelser kommer att infogas i '
”-tagg för att göra dem tillgängliga. CDN finns på den officiella av jQuery och genom att besöka cdnjs respektive. - Därefter skapas två knappelement med ett id på ' t ' och ' dt ”. Skapa också en ' sid element med ett id på ' mål ”. Handlingen av beröringshändelsen kommer att utföras på detta element.
- Inuti '
- Först, CDN ' Nätverk för innehållsleverans ' för jQuery och touch-händelser kommer att infogas i '