Dünaamiliste tundlike veebisaitide loomisel peab arendaja hakkama saama nii mobiilsete žeste kui ka näpunäidete, koputamise ja pühkimisega. Neid žeste haldavad mobiiliarenduskeeled nagu ' lehvima ” või „ reageerida emakeelena ” ja JavaScript. Muud veebiprogrammid seda tüüpi sündmusi ei käsitle. Õnneks! jQuery abiga ' puudutage sündmust ” pistikprogrammi, saab ka neid sündmusi või žeste käsitleda.
See ajaveeb illustreerib jQuery puutetundliku sündmuse pistikprogrammi kasutamist mobiiltelefonidele.
Kuidas kasutada mobiilide jaoks pistikprogrammi jQuery Touch Events?
jQuery võtab kokku puutesündmuste ja mobiilisündmuste erinevused, et kasutada ühtseid API-sid või pistikprogramme, nagu ' puudutage sündmust ”. See pistikprogramm pakub mitmeid sündmusi, mis on toodud allpool tabeli kujul:
| pardi piitsutamine | Elemendi kohal pühkimise lõpus kutsub esile konkreetse funktsiooni. |
| kerimiskäivitus | Kutsub valitud elemendil kerimise alguses välja kindla funktsiooni. |
| kerida | Kutsub elemendil kerimise lõpus välja konkreetse funktsiooni. |
| orientatsiooni muutus | Käivitab funktsiooni, kui seadme või mobiiltelefoni suunda muudetakse, näiteks horisontaalpaigutusest portreepildil liikudes. |
Süntaks
jQuery puutesündmuste süntaks on toodud allpool.
$ ( 'sel' ) .touchEvent ( func ( ) {
// teie kood
} )
Ülaltoodud süntaksis:
-
- ' sel ” on valija, mis on toiming toimingu kutsujana või valitud elemendina.
- ' puudutage Event ” on konkreetne sündmuse nimi, mida kasutatakse, see võib toimuda ülaltoodud tabelist.
- ' func() ” on kohandatud funktsioon, mida pakutav puutesündmus käivitab.
Vaatame nüüd paari näidet, et puutetundlikest sündmustest paremini aru saada.
Näide 1: Puudutuse ja DoubleTap kasutamine
Selles näites on ' puudutage Event 'sündmus' puudutage ” ja „ topeltkoputus ” kasutatakse valitud elemendi funktsiooni kutsumiseks või täitmiseks:
< html >< pea >
< skript src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > stsenaarium >
< stsenaarium src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
stsenaarium >
pea >
< keha >
< h3 stiilis = 'värv: kadetsinine;' > Linux h3 >
< nuppu id = 't' > Puudutage nuppu >
< nuppu id = 'dt' > Topeltkoputus nuppu >
< lk id = 'sihtmärk' > DoubleTap ja Tap Touch sündmuste näide. lk >
< stsenaarium >
$ ( '#t' ) .tap ( funktsiooni ( ) {
$ ( '#sihtmärk' ) .peida ( ) ;
} )
$ ( '#dt' ) .topeltkoputus ( funktsiooni ( ) {
$ ( '#sihtmärk' ) .näita ( ) ;
} )
stsenaarium >
keha >
html >
Ülaltoodud koodi selgitus:
-
- Esiteks, CDN Sisu edastamise võrgustik jQuery ja touch sündmuste jaoks lisatakse
', et muuta need juurdepääsetavaks. CDN-id leiate ametlikult jQuery ja cdnjs-i külastamise kaudu vastavalt. - Järgmisena luuakse kaks nupuelementi ID-ga ' t ” ja „ dt ”. Samuti looge ' lk ' element ID-ga ' sihtmärk ”. Puutesündmuse toiming viiakse läbi selle elemendiga.
- Sees '
- Esiteks, CDN Sisu edastamise võrgustik jQuery ja touch sündmuste jaoks lisatakse