A dinamikusan reszponzív webhelyek létrehozása során a fejlesztőnek kezelnie kell a mobil gesztusokat, például a csípést, koppintást és csúsztatást. Ezeket a gesztusokat olyan mobilfejlesztői nyelvek kezelik, mint a ' csapkod ” vagy „ reagál bennszülött ” és a JavaScript. Más webes programozás nem kezeli az ilyen eseményeket. Szerencsére! A jQuery segítségével ' érintse meg az eseményt ” bővítmény, ezek az események vagy gesztusok is kezelhetők.
Ez a blog bemutatja a jQuery touch eseménybővítmény mobilokhoz való használatának folyamatát.
Hogyan kell használni a jQuery Touch Events beépülő modult mobilokhoz?
A jQuery elvonatkoztatja az érintési események és a mobilesemények közötti különbségeket, hogy következetes API-kat vagy beépülő modulokat használjon, mint pl. érintse meg az eseményt ”. Ez a bővítmény számos eseményt biztosít, amelyek az alábbiakban táblázatos formában láthatók:
| korbácsoló kacsa | Egy adott funkciót hív meg az elem feletti elhúzás végén. |
| scrollstart | Meghív egy adott függvényt a görgetés elején a kiválasztott elemen. |
| görgetni | Meghív egy adott függvényt az elemen való görgetés végén. |
| irányváltás | Aktivál egy funkciót, ha az eszköz vagy a mobil tájolása megváltozik, például ha a fekvő elrendezésből a portréban mozog. |
Szintaxis
A jQuery érintési események szintaxisa az alábbiakban található:
$ ( 'ez' ) .touchEvent ( func ( ) {
// a kódod
} )
A fenti szintaxisban:
-
- A ' ez ” az a kiválasztó, amely egy művelet, mint művelethívó vagy kiválasztott elem.
- A ' touchEvent ” a használt konkrét eseménynév, amely a fent megadott táblázatból történhet.
- A ' func() ” az az egyéni funkció, amelyet a megadott érintési esemény hajt végre.
Most nézzünk meg néhány példát az érintési események jobb megértéséhez.
1. példa: Tap és DoubleTap használata
Ebben a példában a „ touchEvent 'esemény' Koppintson a ” és „ dupla érintés ” egy kiválasztott elemen keresztül valamilyen funkció meghívására vagy végrehajtására szolgál:
< html >< fej >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > forgatókönyv >
< forgatókönyv src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
forgatókönyv >
fej >
< test >
< h3 stílus = 'szín: kadetkék;' > Linux h3 >
< gomb id = 't' > Koppintson a gomb >
< gomb id = 'dt' > Dupla érintés gomb >
< p id = 'cél' > Példa a DoubleTap és a Tap Touch eseményekre. p >
< forgatókönyv >
$ ( '#t' ) .Koppintson a ( funkció ( ) {
$ ( '#cél' ) .elrejt ( ) ;
} )
$ ( '#dt' ) .dupla érintés ( funkció ( ) {
$ ( '#cél' ) .előadás ( ) ;
} )
forgatókönyv >
test >
html >
A fenti kód magyarázata:
-
- Először is a CDN Tartalomszolgáltató hálózat ' a jQuery és a touch eseményekhez be lesz illesztve a '
” címkét, hogy hozzáférhetővé tegye őket. A CDN-ek megtalálhatók a hivatalos oldalon jQuery és a cdnjs meglátogatásával illetőleg. - Ezután két gombelem jön létre, amelyek azonosítója ' t ” és „ dt ”. Ezenkívül hozzon létre egy „ p ' elem 'azonosítóval' cél ”. Az érintési esemény által végrehajtott művelet ezen az elemen történik.
- Benne '
- Először is a CDN Tartalomszolgáltató hálózat ' a jQuery és a touch eseményekhez be lesz illesztve a '