Kurdamas dinamiškas reaguojančias svetaines, kūrėjas turi valdyti mobiliuosius gestus, taip pat sugnybti, bakstelėti ir perbraukti. Šiuos gestus tvarko mobiliojo ryšio kūrimo kalbos, pvz. plazdėjimas “ arba „ reaguoti gimtoji “ ir „JavaScript“. Kitas žiniatinklio programavimas neapdoroja tokio įvykio. Laimei! Su „jQuery“ pagalba liesti įvykį “ papildinį, šie įvykiai ar gestai taip pat gali būti tvarkomi.
Šiame tinklaraštyje bus parodytas mobiliesiems telefonams skirto jQuery touch įvykių papildinio naudojimo procesas.
Kaip naudoti „jQuery Touch Events“ papildinį mobiliesiems telefonams?
„jQuery“ abstrahuoja jutiklinių įvykių ir mobiliųjų įvykių skirtumus, kad galėtų naudoti nuoseklias API arba papildinius, pvz., „ liesti įvykį “. Yra keli šio papildinio įvykiai, kurie pateikiami toliau lentelės pavidalu:
| plakant antį | Perbraukimo per elementą pabaigoje iškviečia tam tikrą funkciją. |
| slinkties pradžia | Iškviečia konkrečią funkciją pasirinkto elemento slinkimo pradžioje. |
| slinkti | Elemento slinkimo pabaigoje iškviečia tam tikrą funkciją. |
| orientacijos pakeitimas | Suaktyvinama funkcija, kai pakeičiama įrenginio arba mobiliojo telefono orientacija, pavyzdžiui, judant portrete iš gulsčio išdėstymo. |
Sintaksė
„jQuery Touch“ įvykių sintaksė nurodyta toliau:
$ ( 'tai' ) .touchEvent ( func ( ) {
// jūsų kodas
} )
Aukščiau pateiktoje sintaksėje:
-
- „ tai “ yra parinkiklis, kuris yra veiksmas kaip veiksmo skambučio arba pasirinktas elementas.
- „ TouchEvent “ yra naudojamas konkretus įvykio pavadinimas, jis gali įvykti iš aukščiau nurodytos lentelės.
- „ func() “ yra tinkinta funkcija, kurią turi atlikti pateiktas palietimo įvykis.
Dabar pažvelkime į kelis pavyzdžius, kad geriau suprastume prisilietimo įvykius.
1 pavyzdys: Tap ir DoubleTap naudojimas
Šiame pavyzdyje „ TouchEvent 'įvykis' bakstelėkite “ ir „ dukart paspausti “ bus naudojamas norint iškviesti arba atlikti tam tikrą funkciją pasirinktame elemente:
< html >< galva >
< scenarijus src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > scenarijus >
< scenarijus src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
scenarijus >
galva >
< kūnas >
< h3 stilius = 'spalva: kadeto mėlyna;' > Linux h3 >
< mygtuką id = 't' > Bakstelėkite mygtuką >
< mygtuką id = 'dt' > Dukart paspausti mygtuką >
< p id = 'taikinys' > DoubleTap ir Tap Touch įvykių pavyzdys. p >
< scenarijus >
$ ( '#t' ) .bakstelėkite ( funkcija ( ) {
$ ( '#taikinys' ) .paslėpk ( ) ;
} )
$ ( '#dt' ) .dukart paspausti ( funkcija ( ) {
$ ( '#taikinys' ) .Rodyti ( ) ;
} )
scenarijus >
kūnas >
html >
Aukščiau pateikto kodo paaiškinimas:
-
- Pirma, CDN Turinio pristatymo tinklas „JQuery“ ir „touch“ įvykių atveju bus įterptas į „
“, kad jie būtų pasiekiami. CDN galima rasti oficialiame puslapyje jQuery ir apsilankę cdnjs atitinkamai. - Tada sukuriami du mygtukų elementai, kurių ID yra ' t “ ir „ dt “. Taip pat sukurkite „ p ' elementas su ID ' taikinys “. Veiksmas liečiant įvykį bus atliktas su šiuo elementu.
- Viduje '
- Pirma, CDN Turinio pristatymo tinklas „JQuery“ ir „touch“ įvykių atveju bus įterptas į „