Pri vytváraní dynamických responzívnych webových stránok musí vývojár zvládnuť mobilné gestá, ako aj stláčanie, klepanie a posúvanie. Tieto gestá sú ovládané jazykmi pre vývoj mobilných zariadení ako „ trepotanie “ alebo „ reagovať natívne “ a JavaScript. Iné webové programovanie takéto udalosti nezvláda. Našťastie! S pomocou jQuery „ dotyková udalosť ” možno spracovať aj tieto udalosti alebo gestá.
Tento blog bude ilustrovať proces používania doplnku dotykovej udalosti jQuery pre mobilné zariadenia.
Ako používať doplnok jQuery Touch Events pre mobily?
jQuery abstrahuje rozdiely medzi dotykovými udalosťami a mobilnými udalosťami, aby používal konzistentné rozhrania API alebo doplnky ako „ dotyková udalosť “. Tento doplnok poskytuje niekoľko udalostí, ktoré sú uvedené nižšie v tabuľkovej forme:
| šibacia kačica | Vyvolá špecifickú funkciu na konci potiahnutia cez prvok. |
| scrollstart | Vyvolá špecifickú funkciu na začiatku rolovania na vybranom prvku. |
| scrollend | Vyvolá špecifickú funkciu na konci rolovania prvku. |
| zmena orientácie | Spustí funkciu, keď sa zmení orientácia zariadenia alebo mobilu, ako je pohyb na výšku z rozloženia na šírku. |
Syntax
Syntax pre dotykové udalosti jQuery je uvedená nižšie:
$ ( 'toto' ) .touchEvent ( func ( ) {
// váš kód
} )
Vo vyššie uvedenej syntaxi:
-
- ' toto ” je selektor, ktorý predstavuje akciu ako vyvolávač akcie alebo vybraný prvok.
- ' touchEvent ” je konkrétny názov udalosti, ktorý sa používa, môže to byť udalosť z vyššie uvedenej tabuľky.
- ' func() “ je vlastná funkcia, ktorá sa vykoná poskytnutou dotykovou udalosťou.
Teraz sa pozrime na niekoľko príkladov pre lepšie pochopenie dotykových udalostí.
Príklad 1: Použitie Tap a DoubleTap
V tomto príklade „ touchEvent 'udalosť' poklepať “ a „ dvojité poklepanie ” sa bude používať na vyvolanie alebo vykonanie nejakej funkcie nad vybratým prvkom:
< html >< hlavu >
< skript src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > skript >
< skript src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
skript >
hlavu >
< telo >
< h3 štýl = 'color: kadetblue;' > Linux h3 >
< tlačidlo id = 't' > Klepnite tlačidlo >
< tlačidlo id = 'dt' > Dvojité poklepanie tlačidlo >
< p id = 'cieľ' > Príklad udalostí dvojitého klepnutia a klepnutia. p >
< skript >
$ ( '#t' ) .ťuknite ( funkciu ( ) {
$ ( '#target' ) .skryť ( ) ;
} )
$ ( '#dt' ) .dvojité poklepanie ( funkciu ( ) {
$ ( '#target' ) .šou ( ) ;
} )
skript >
telo >
html >
Vysvetlenie vyššie uvedeného kódu:
-
- Po prvé, CDN “ Sieť na doručovanie obsahu “ pre jQuery a dotykové udalosti sa vloží do „ “, aby boli prístupné. CDN nájdete na oficiálnych stránkach jQuery a prostredníctvom návštevy cdnjs resp.
- Ďalej sa vytvoria dva prvky tlačidiel s ID „ t “ a „ dt “. Vytvorte tiež „ p prvok s ID „ cieľ “. Na tomto prvku sa vykoná akcia dotykovej udalosti.
- Vnútri '