U stvaranju dinamičkih responzivnih web-mjesta, programer treba rukovati pokretima na mobilnom uređaju kao što su štipanje prstiju, dodirivanje i prevlačenje. Ovim gestama upravljaju jezici za mobilni razvoj poput ' lepršati ' ili ' reagirati native ” i JavaScript. Ostalo web programiranje ne obrađuje ovu vrstu događaja. Srećom! Uz pomoć jQuery-ja ' događaj dodira ”, također se može rukovati ovim događajima ili gestama.
Ovaj će blog ilustrirati postupak korištenja jQuery dodatka za događaj dodira za mobitele.
Kako koristiti dodatak jQuery Touch Events za mobitele?
jQuery apstrahira razlike između događaja dodira i mobilnih događaja kako bi koristio dosljedne API-je ili dodatke poput ' događaj dodira ”. Postoji nekoliko događaja koje nudi ovaj dodatak koji su navedeni ispod u tabličnom obliku:
| patka za bičevanje | Poziva određenu funkciju na kraju prijelaza preko elementa. |
| scrollstart | Poziva određenu funkciju na početku pomicanja na odabranom elementu. |
| scrollend | Poziva određenu funkciju na kraju pomicanja po elementu. |
| promjena orijentacije | Pokreće funkciju kada se promijeni orijentacija uređaja ili mobilnog telefona, poput pomicanja u portretu iz pejzažnog izgleda. |
Sintaksa
Sintaksa za jQuery događaje dodira navedena je u nastavku:
$ ( 'ovaj' ) .touchEvent ( funk ( ) {
// vaš kod
} )
U gornjoj sintaksi:
-
- ' ovaj ” je selektor koji je radnja kao pozivatelj akcije ili odabrani element.
- ' dodirni događaj ” je specifični naziv događaja koji se koristi, može se dogoditi iz gore navedene tablice.
- ' func() ” je prilagođena funkcija koju će izvršiti navedeni događaj dodira.
Posjetimo sada nekoliko primjera za bolje razumijevanje događaja dodira.
Primjer 1: Upotreba Tap i DoubleTap
U ovom primjeru, ' dodirni događaj 'događaj' dodirnite ' i ' dvostruki dodir ” će se koristiti za pozivanje ili izvođenje neke funkcije nad odabranim elementom:
< html >< glava >
< skripta src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > skripta >
< skripta src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
skripta >
glava >
< tijelo >
< h3 stil = 'boja: kadetplava;' > Linux h3 >
< dugme iskaznica = 't' > Dodirnite dugme >
< dugme iskaznica = 'dt' > Dvostruki dodir dugme >
< str iskaznica = 'cilj' > Primjer događaja DoubleTap i Tap Touch. str >
< skripta >
$ ( '#t' ) .tapnite ( funkcija ( ) {
$ ( '#cilj' ) .sakriti ( ) ;
} )
$ ( '#dt' ) .dvostruki dodir ( funkcija ( ) {
$ ( '#cilj' ) .pokazati ( ) ;
} )
skripta >
tijelo >
html >
Objašnjenje gornjeg koda:
-
- Prvo, CDN ' Mreža za isporuku sadržaja ' za jQuery i dodirne događaje umetnut će se unutar '
” kako biste ih učinili dostupnima. CDN-ove možete pronaći na službenoj stranici jQueryja i putem posjeta cdnjs odnosno. - Zatim se stvaraju dva elementa gumba s ID-om ' t ' i ' dt ”. Također, stvorite ' str ” element s ID-om „ cilj ”. Radnja događaja dodira izvršit će se na ovom elementu.
- Unutar '
” odaberite element s ID-om „ t ' i priložite ' dodirnite ” dodirnite događaj s njim. Ovaj događaj odabire drugi html element s ID-om ' cilj ' i primjenjuje ' sakriti() ” metoda na njemu. - Štoviše, odaberite ' dt ' i primijenite ' dvostruki dodir ' dodirnite događaj i na isti način primijenite ' pokazati() ' metoda na ' cilj ” id element.
- Prvo, CDN ' Mreža za isporuku sadržaja ' za jQuery i dodirne događaje umetnut će se unutar '
Izlaz generiran nakon kompilacije koda prikazan je u nastavku:
Gornji izlaz pokazuje da su radnje izvršene na dodirnim događajima 'tap' i 'doubletap'.
Primjer 2: Upotreba Swipe i Swipeend Touch Events
U ovom primjeru, implementacija ' ukrasti ' i ' patka za bičevanje ” demonstrirati će se događaji dodira:
< skripta >$ ( '#t' ) .ukrasti ( funkcija ( ) {
$ ( '#cilj' ) .sakriti ( ) ;
} )
$ ( '#t' ) .swiping patka ( funkcija ( ) {
$ ( '#cilj' ) .sakriti ( ) ;
} )
skripta >
Opis gornjeg jQuery koda je sljedeći:
-
- Prvo se odabire odabrani element preko njegovog ID-a ' t ' i ' ukrasti ” priložen je događaj. Ovaj događaj pokreće funkciju, a aktivirana funkcija odabire ciljani element putem id-a ' cilj ' i primjenjuje ' sakriti() ” kako bi njegov sadržaj bio nevidljiv.
- Zatim, ' patka za bičevanje ” primjenjuje se na isti element, a njegova funkcija primjenjuje pokazati() ' preko odabranog elementa s ID-om ' cilj ” kako bi sadržaj bio vidljiv kada završi događaj prelaska.
Izlaz za gornji kod se generira kao:
Izlaz pokazuje da se sadržaj ciljanog elementa sakriva u trenutku prelaska i pojavljuje se kada se završi prelazak.
Primjer 3: Upotreba scrollstart i scrollend dodirnih događaja
U ovom slučaju, ' scrollstart ' i ' scrollend ” događaji dodira će se implementirati:
< skripta >$ ( '#t' ) .scrollstart ( funkcija ( ) {
$ ( '#cilj' ) .sakriti ( ) ;
} )
$ ( '#t' ) .scrollend ( funkcija ( ) {
$ ( '#cilj' ) .pokazati ( ) ;
} )
skripta >
Objašnjenje za gornji kod je navedeno kao:
-
- Jedina promjena u ovom primjeru je korištenje ' scrollstart ' i ' scrollend 'događaji za izvođenje' sakriti() ' i ' pokazati() ” nad elementom, a ostatak koda ostat će isti kao u gornjem primjeru.
- Ciljani tekst se sakriva na početku ili tijekom pomicanja i postaje vidljiv kada pomicanje završi.
Izlaz generiran nakon kompilacije gornjeg koda prikazan je u nastavku:
Izlaz pokazuje da je sadržaj elementa skriven u vrijeme pomicanja i postaje vidljiv kada pomicanje završi.
Ovaj blog je objasnio jQuery dodatke za događaj dodira za mobilne uređaje.
Zaključak
jQuery ' događaj dodira ” dodatak za mobilne uređaje, omogućuje jQueryju dodavanje događaja koji se posebno bave događajima koji se događaju na mobitelima osjetljivim na dodir kao što su prevlačenje prstom, dodirivanje, promjena orijentacije itd. Događaji koje pruža ovaj dodatak implementirani su kao i tradicionalni “ na klik ” ili drugim događajima. Korištenjem ovog dodatka, programer može jednostavno primijeniti određene funkcije u skladu s interakcijom korisnika s mobitelom. Ovaj blog je objasnio jQuery touch event plugging za mobitel.