Veidojot dinamiskas adaptīvas vietnes, izstrādātājam ir jārīkojas arī ar mobilajām ierīcēm paredzētiem žestiem, piemēram, saspiešanu, pieskaršanos un vilkšanu. Šos žestus apstrādā mobilās izstrādes valodas, piemēram, “ plandīšanās ” vai “ reaģēt dzimtā ” un JavaScript. Cita tīmekļa programmēšana neapstrādā šāda veida notikumus. Par laimi! Ar jQuery palīdzību ' pieskāriena notikums ” spraudni, šos notikumus vai žestus var arī apstrādāt.
Šis emuārs ilustrēs jQuery pieskāriena notikumu spraudņa izmantošanas procesu mobilajiem tālruņiem.
Kā mobilajiem tālruņiem izmantot spraudni jQuery Touch Events?
jQuery abstrahē atšķirības starp pieskāriena notikumiem un mobilajiem notikumiem, lai izmantotu konsekventus API vai spraudņus, piemēram, ' pieskāriena notikums ”. Šis spraudnis nodrošina vairākus notikumus, kas ir norādīti zemāk tabulas veidā:
| pīles pēršana | Pārvelkot pār elementu, tiek izsaukta noteikta funkcija. |
| ritināšanas sākums | Izsauc noteiktu funkciju atlasītā elementa ritināšanas sākumā. |
| ritināt | Elementa ritināšanas beigās izsauc noteiktu funkciju. |
| orientācijas maiņa | Aktivizē funkciju, kad tiek mainīta ierīces vai mobilā tālruņa orientācija, piemēram, pārvietojoties portretā no ainavas izkārtojuma. |
Sintakse
Tālāk ir norādīta jQuery pieskāriena notikumu sintakse.
$ ( 'šis' ) .touchEvent ( func ( ) {
// savu kodu
} )
Iepriekš minētajā sintaksē:
-
- ' šis ” ir atlasītājs, kas ir darbība kā darbības izsaucējs vai atlasītais elements.
- ' touchEvent ” ir konkrētais notikuma nosaukums, kas tiek izmantots, tas var notikt no iepriekš norādītās tabulas.
- ' func() ” ir pielāgota funkcija, ko izpildīs nodrošinātais pieskāriena notikums.
Tagad apskatīsim dažus piemērus, lai labāk izprastu pieskārienu notikumus.
1. piemērs. Pieskaršanās un DoubleTap izmantošana
Šajā piemērā ' touchEvent 'pasākums' krāns ' un ' divreiz pieskarieties ” tiks izmantots, lai izsauktu vai veiktu kādu funkciju pār atlasīto elementu:
< html >< galvu >
< skripts src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > skripts >
< skripts src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
skripts >
galvu >
< ķermeni >
< h3 stils = 'krāsa: kadetzila;' > Linux h3 >
< pogu id = 't' > Krāns pogu >
< pogu id = 'dt' > Divreiz pieskarieties pogu >
< lpp id = 'mērķis' > DoubleTap un Tap Touch notikumu piemērs. lpp >
< skripts >
$ ( '#t' ) .krāns ( funkciju ( ) {
$ ( '#mērķis' ) .paslēpt ( ) ;
} )
$ ( '#dt' ) .divreiz pieskarieties ( funkciju ( ) {
$ ( '#mērķis' ) .parādīt ( ) ;
} )
skripts >
ķermeni >
html >
Iepriekš minētā koda skaidrojums:
-
- Pirmkārt, CDN Satura piegādes tīkls jQuery un touch notikumiem tiks ievietots sadaļā '
”, lai tie būtu pieejami. CDN var atrast oficiālajā lapā jQuery un apmeklējot cdnjs attiecīgi. - Pēc tam tiek izveidoti divi pogas elementi ar ID ' t ' un ' dt ”. Izveidojiet arī ' lpp 'elements ar ID ' mērķis ”. Pieskāriena notikuma darbība tiks veikta šim elementam.
- Iekšpusē '
' tagu, atlasiet elementu ar ID ' t un pievienojiet ' krāns ” pieskarieties notikumam ar to. Šis notikums atlasa citu html elementu ar ID ' mērķis ” un piemēro „ slēpt () ” metodi par to. - Turklāt atlasiet “ dt ' elementu un izmantojiet ' divreiz pieskarieties ” pieskarieties notikumam un tādā pašā veidā lietojiet parādīt () ' metode uz ' mērķis ”id elements.
- Pirmkārt, CDN Satura piegādes tīkls jQuery un touch notikumiem tiks ievietots sadaļā '
Izvade, kas ģenerēta pēc koda apkopošanas, ir parādīta zemāk:
Iepriekš redzamā izvade parāda, ka darbības ir veiktas pieskāriena un dubultpieskāriena notikumiem.
2. piemērs: Swipe un Swipeend Touch Events izmantošana
Šajā piemērā “ velciet ' un ' pīles pēršana ” tiks demonstrēti pieskāriena pasākumi:
< skripts >$ ( '#t' ) .pārvelciet ( funkciju ( ) {
$ ( '#mērķis' ) .paslēpt ( ) ;
} )
$ ( '#t' ) .švelkot pīli ( funkciju ( ) {
$ ( '#mērķis' ) .paslēpt ( ) ;
} )
skripts >
Iepriekš minētā jQuery koda apraksts ir šāds:
-
- Pirmkārt, izvēlētais elements tiek atlasīts, izmantojot tā ID ' t ” un „ velciet ” notikums ir pievienots tam. Šis notikums aktivizē funkciju, un aktivizētā funkcija atlasa mērķa elementu, izmantojot ID ' mērķis ” un piemēro „ slēpt () ” metodi, lai padarītu tā saturu neredzamu.
- Tālāk “ pīles pēršana notikums tiek lietots vienam un tam pašam elementam, un tā funkcija tiek lietota parādīt () ” metodi virs atlasītā elementa ar id “ mērķis ”, lai padarītu saturu redzamu, kad velk notikums beidzas.
Iepriekš minētā koda izvade tiek ģenerēta šādi:
Izvade parāda, ka atlasītā elementa saturs tiek paslēpts vilkšanas laikā un tiek parādīts, kad vilkšanas notikums tiek beidzies.
3. piemērs: ritināšanas sākuma un ritināšanas pieskāriena notikumi izmantošana
Šajā gadījumā “ ritināšanas sākums ' un ' ritināt ” tiks īstenoti pieskāriena pasākumi:
< skripts >$ ( '#t' ) .scrollstart ( funkciju ( ) {
$ ( '#mērķis' ) .paslēpt ( ) ;
} )
$ ( '#t' ) .scrollend ( funkciju ( ) {
$ ( '#mērķis' ) .parādīt ( ) ;
} )
skripts >
Iepriekš minētā koda skaidrojums ir šāds:
-
- Vienīgās izmaiņas šajā piemērā ir '' ritināšanas sākums ' un ' ritināt 'pasākumi, kas jāveic' slēpt () ' un ' parādīt () ” metodes, izmantojot elementu, un pārējais kods paliks tāds pats kā iepriekš minētajā piemērā.
- Mērķa teksts tiek paslēpts ritināšanas sākumā vai laikā, un tas kļūst redzams, kad ritināšana beidzas.
Izvade, kas ģenerēta pēc iepriekš minētā koda apkopošanas, ir parādīta zemāk:
Izvade parāda, ka elementa saturs ritināšanas laikā ir paslēpts un kļūst redzams, kad ritināšana beidzas.
Šajā emuārā ir izskaidroti jQuery pieskāriena notikumu spraudņi mobilajām ierīcēm.
Secinājums
JQuery' pieskāriena notikums ” spraudnis mobilajām ierīcēm ļauj jQuery pievienot notikumus, kas īpaši apstrādā notikumus, kas notiek skārienjūtīgajos mobilajos tālruņos, piemēram, vilkšana, pieskaršanās, orientācijas maiņa utt. Šī spraudņa nodrošinātie notikumi tiek īstenoti tāpat kā tradicionālie onclick ” vai citiem pasākumiem. Izmantojot šo spraudni, izstrādātājs var viegli lietot noteiktas funkcijas atbilstoši lietotāja mijiedarbībai ar mobilo tālruni. Šajā emuārā ir izskaidrots jQuery pieskāriena notikuma pievienošana mobilajām ierīcēm.