Při vytváření dynamických responzivních webových stránek musí vývojář zvládnout mobilní gesta, jako je svírání, klepání a přejíždění. Tato gesta jsou zpracována mobilními vývojovými jazyky jako „ třepetání “ nebo „ reagovat nativní “ a JavaScript. Jiné webové programování tento druh událostí nezvládá. Naštěstí! S pomocí jQuery „ dotyková událost “, lze tyto události nebo gesta také zpracovat.
Tento blog bude ilustrovat proces používání pluginu jQuery touch event pro mobily.
Jak používat plugin jQuery Touch Events pro mobily?
jQuery abstrahuje rozdíly mezi dotykovými událostmi a mobilními událostmi, aby používal konzistentní rozhraní API nebo pluginy jako „ dotyková událost “. Tento plugin poskytuje několik událostí, které jsou uvedeny níže v tabulkové formě:
| bičovací kachna | Vyvolá konkrétní funkci na konci přejetí přes prvek. |
| scrollstart | Vyvolá určitou funkci na začátku rolování na vybraném prvku. |
| scrollend | Vyvolá konkrétní funkci na konci rolování na prvku. |
| změna orientace | Spustí funkci, když se změní orientace zařízení nebo mobilu, jako je pohyb na výšku z rozvržení na šířku. |
Syntax
Syntaxe dotykových událostí jQuery je uvedena níže:
$ ( 'tento' ) .touchEvent ( func ( ) {
// váš kód
} )
Ve výše uvedené syntaxi:
-
- ' tento ” je selektor, což je akce jako volající akce nebo vybraný prvek.
- ' touchEvent ” je konkrétní název události, který se používá, může to být událost z výše uvedené tabulky.
- ' func() “ je uživatelská funkce, která bude provedena poskytnutou dotykovou událostí.
Nyní se podívejme na několik příkladů pro lepší pochopení dotykových událostí.
Příklad 1: Použití Tap a DoubleTap
V tomto příkladu „ touchEvent ' událost ' klepnout ' a ' dvojí poklepání ” se bude používat k vyvolání nebo provedení nějaké funkce nad vybraným prvkem:
< html >< hlava >
< 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 >
hlava >
< tělo >
< h3 styl = 'color: kadetblue;' > Linux h3 >
< knoflík id = 't' > Klepněte knoflík >
< knoflík id = 'dt' > Dvojí poklepání knoflík >
< p id = 'cílová' > Příklad událostí poklepání a dotyku. p >
< skript >
$ ( '#t' ) .klepnout ( funkce ( ) {
$ ( '#cílová' ) .skrýt ( ) ;
} )
$ ( '#dt' ) .dvojí poklepání ( funkce ( ) {
$ ( '#cílová' ) .ukázat ( ) ;
} )
skript >
tělo >
html >
Vysvětlení výše uvedeného kódu:
-
- Za prvé, CDN “ Síť pro doručování obsahu “ pro jQuery a dotykové události se vloží do “
“, aby byly přístupné. CDN lze nalézt na oficiálních stránkách jQuery a prostřednictvím návštěvy cdnjs respektive. - Dále se vytvoří dva prvky tlačítka s id „ t ' a ' dt “. Vytvořte také „ p prvek s ID „ cílová “. Na tomto prvku se provede akce dotykové události.
- Uvnitř '
- Za prvé, CDN “ Síť pro doručování obsahu “ pro jQuery a dotykové události se vloží do “