Pri ustvarjanju dinamičnih odzivnih spletnih mest mora razvijalec obvladovati mobilne poteze, kot so stiskanje prstov, tapkanje in vlečenje. Te poteze obravnavajo mobilni razvojni jeziki, kot je » trepetanje « ali » reagirajo domači « in JavaScript. Drugi spletni programi ne obravnavajo tovrstnih dogodkov. Na srečo! S pomočjo jQueryjevega ' dogodek na dotik ”, je mogoče obravnavati tudi te dogodke ali poteze.
Ta spletni dnevnik bo ponazoril postopek uporabe vtičnika za dogodke na dotik jQuery za mobilne naprave.
Kako uporabljati vtičnik jQuery Touch Events za mobilne naprave?
jQuery abstrahira razlike med dogodki dotika in mobilnimi dogodki za uporabo doslednih API-jev ali vtičnikov, kot je » dogodek na dotik ”. Ta vtičnik ponuja več dogodkov, ki so navedeni spodaj v obliki tabele:
| raca za stepanje | Prikliče določeno funkcijo na koncu potega po elementu. |
| scrollstart | Prikliče določeno funkcijo na začetku drsenja po izbranem elementu. |
| scrollend | Prikliče določeno funkcijo na koncu drsenja po elementu. |
| sprememba orientacije | Sproži funkcijo, ko se usmeritev naprave ali mobilnega telefona spremeni, kot je premikanje v pokončnem položaju iz ležeče postavitve. |
Sintaksa
Sintaksa za dogodke dotika jQuery je navedena spodaj:
$ ( 'ta' ) .touchEvent ( funk ( ) {
// vaša koda
} )
V zgornji sintaksi:
-
- ' to ” je izbirnik, ki je dejanje kot klicatelj dejanja ali izbrani element.
- ' touchEvent ” je specifično ime dogodka, ki se uporablja, lahko je dogodek iz zgoraj navedene tabele.
- ' func() ” je funkcija po meri, ki jo bo izvedel podani dogodek dotika.
Zdaj pa si oglejmo nekaj primerov za boljše razumevanje dogodkov dotika.
Primer 1: Uporaba Tap in DoubleTap
V tem primeru je ' touchEvent 'dogodek' tapnite « in » dvakrat tapnite ” bo uporabljen za priklic ali izvajanje neke funkcije nad izbranim elementom:
< html >< glavo >
< skript src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > scenarij >
< scenarij src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
scenarij >
glavo >
< telo >
< h3 stil = 'barva: kadetsko modra;' > Linux h3 >
< gumb id = 't' > Tapnite gumb >
< gumb id = 'dt' > Dvakrat tapnite gumb >
< str id = 'tarča' > Primer dogodkov DoubleTap in Tap Touch. str >
< scenarij >
$ ( '#t' ) .tap ( funkcijo ( ) {
$ ( '#target' ) .skrij se ( ) ;
} )
$ ( '#dt' ) .doubletap ( funkcijo ( ) {
$ ( '#target' ) .pokaži ( ) ;
} )
scenarij >
telo >
html >
Razlaga zgornje kode:
-
- Prvič, CDN ' Omrežje za dostavo vsebin « za dogodke jQuery in dotik bo vstavljen znotraj »
”, da jih naredite dostopne. CDN-je najdete na uradni strani jQuery in z obiskom cdnjs oz. - Nato se ustvarita dva elementa gumba z ID-jem ' t « in » dt ”. Prav tako ustvarite » str » element z id-jem » tarča ”. Na tem elementu bo izvedeno dejanje dogodka dotika.
- Znotraj '
', izberite element z ID-jem ' t « in priložite » tapnite ” se z njim dotaknite dogodka. Ta dogodek izbere drug element html z ID-jem ' tarča « in uporablja » skrij() ” na njej. - Poleg tega izberite » dt ' in uporabite ' dvakrat tapnite ' dotaknite se dogodka in na enak način uporabite ' pokaži() ' metoda na ' tarča ” id element.
- Prvič, CDN ' Omrežje za dostavo vsebin « za dogodke jQuery in dotik bo vstavljen znotraj »
Izhod, ustvarjen po prevajanju kode, je prikazan spodaj:
Zgornji izhod kaže, da so bila dejanja izvedena na dogodkih dotika »tap« in »doubletat«.
2. primer: uporaba dogodkov Swipe in Swipeend Touch
V tem primeru je izvedba » povlecite « in » raca za stepanje ” bodo prikazani dogodki na dotik:
< scenarij >$ ( '#t' ) .povlecite ( funkcijo ( ) {
$ ( '#target' ) .skrij se ( ) ;
} )
$ ( '#t' ) .swiping duck ( funkcijo ( ) {
$ ( '#target' ) .skrij se ( ) ;
} )
scenarij >
Opis zgornje kode jQuery je naslednji:
-
- Najprej je izbrani element izbran prek njegovega id-ja ' t ' in ' povlecite ” je pripet dogodek. Ta dogodek sproži funkcijo in sprožena funkcija izbere ciljni element prek id-ja ' tarča « in uporablja » skrij() ” na njem, da postane njegova vsebina nevidna.
- Nato je ' raca za stepanje ' je uporabljen za isti element in njegova funkcija je uporabila ' pokaži() ' nad izbranim elementom z ID-jem ' tarča ”, da bo vsebina vidna, ko se poteg konča.
Izhod za zgornjo kodo se ustvari kot:
Izhod pokaže, da se ciljna vsebina elementa skrije v času vlečenja in se prikaže, ko se dogodek vlečenja konča.
Primer 3: Uporaba dogodkov dotika scrollstart in scrollend
V tem primeru je ' scrollstart « in » scrollend ” bodo izvedeni dogodki na dotik:
< scenarij >$ ( '#t' ) .scrollstart ( funkcijo ( ) {
$ ( '#target' ) .skrij se ( ) ;
} )
$ ( '#t' ) .scrollend ( funkcijo ( ) {
$ ( '#target' ) .pokaži ( ) ;
} )
scenarij >
Razlaga zgornje kode je navedena kot:
-
- Edina sprememba v tem primeru je uporaba ' scrollstart « in » scrollend 'dogodki za izvedbo' skrij() « in » pokaži() ” nad elementom, preostala koda pa bo ostala enaka kot v zgornjem primeru.
- Ciljno besedilo se skrije na začetku ali med drsenjem in postane vidno, ko se drsenje konča.
Izhod, ustvarjen po prevajanju zgornje kode, je prikazan spodaj:
Izhod pokaže, da je vsebina elementa v času drsenja skrita in postane vidna, ko se drsenje konča.
V tem spletnem dnevniku so razloženi vtičniki dogodkov dotika jQuery za mobilne naprave.
Zaključek
jQuery ' dogodek na dotik ” vtičnik za mobilne naprave omogoča jQuery dodajanje dogodkov, ki posebej obravnavajo dogodke, ki se zgodijo na mobilnih telefonih na dotik, kot so drsenje, tapkanje, sprememba orientacije itd. Dogodki, ki jih ponuja ta vtičnik, so implementirani tako kot tradicionalni “ onclick ” ali druge dogodke. Z uporabo tega vtičnika lahko razvijalec enostavno uporabi določene funkcije glede na interakcijo uporabnika z mobilnim telefonom. Ta blog je razložil priklop dogodka jQuery touch za mobilne naprave.