Luodessaan dynaamisia responsiivisia verkkosivustoja kehittäjän on käsiteltävä mobiilieleitä sekä nipistämistä, napauttamista ja pyyhkäisyä. Näitä eleitä käsittelevät mobiilikehityskielet, kuten ' lepattaa ' tai ' reagoi natiivi ” ja JavaScript. Muu web-ohjelmointi ei käsittele tällaista tapahtumaa. Onneksi! jQueryn avulla kosketa tapahtumaa ”-laajennus, nämä tapahtumat tai eleet voidaan myös käsitellä.
Tämä blogi havainnollistaa prosessia, jolla jQuery touch -tapahtumalaajennusta käytetään matkapuhelimiin.
Kuinka käyttää jQuery Touch Events -laajennusta matkapuhelimille?
jQuery tiivistää kosketustapahtumien ja mobiilitapahtumien väliset erot käyttääkseen johdonmukaisia sovellusliittymiä tai laajennuksia, kuten ' kosketa tapahtumaa ”. Tämä laajennus tarjoaa useita tapahtumia, jotka on esitetty alla taulukkomuodossa:
| ruoskimalla ankkaa | Kutsuu tietyn toiminnon elementin päällä pyyhkäisyn lopussa. |
| scrollstart | Kutsuu tietyn toiminnon valitun elementin vierityksen alussa. |
| rullaa | Kutsuu tietyn toiminnon elementin vierityksen lopussa. |
| suunnanmuutos | Käynnistää toiminnon, kun laitteen tai matkapuhelimen suunta muuttuu, kuten liikkuminen pystysuuntaisessa asettelussa. |
Syntaksi
jQuery-kosketustapahtumien syntaksi on ilmoitettu alla:
$ ( 'Tämä' ) .touchEvent ( func ( ) {
// koodisi
} )
Yllä olevassa syntaksissa:
-
- ' Tämä ” on valitsin, joka on toiminto toiminnon kutsujana tai valittuna elementtinä.
- ' kosketa Tapahtuma ” on tietty tapahtuman nimi, jota käytetään, se voi tapahtua yllä mainitusta taulukosta.
- ' func() ” on mukautettu toiminto, jonka toimitettu kosketustapahtuma suorittaa.
Katsotaanpa nyt muutama esimerkki kosketustapahtumien ymmärtämiseksi paremmin.
Esimerkki 1: Tapin ja DoubleTapin käyttö
Tässä esimerkissä ' kosketa Tapahtuma ' tapahtuma ' napauta ' ja ' kaksoisnapautus ' käytetään kutsumaan tai suorittamaan jokin toiminto valitulle elementille:
< html >< pää >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > käsikirjoitus >
< käsikirjoitus src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
käsikirjoitus >
pää >
< kehon >
< h3 tyyli = 'väri: kadetinsininen;' > Linux h3 >
< -painiketta id = 't' > Napauta -painiketta >
< -painiketta id = 'dt' > Kaksoisnapauta -painiketta >
< s id = 'kohde' > Esimerkki DoubleTap- ja Tap Touch -tapahtumista. s >
< käsikirjoitus >
$ ( '#t' ) .tap ( toiminto ( ) {
$ ( '#kohde' ) .piilottaa ( ) ;
} )
$ ( '#dt' ) .doubletap ( toiminto ( ) {
$ ( '#kohde' ) .näytä ( ) ;
} )
käsikirjoitus >
kehon >
html >
Yllä olevan koodin selitys:
-
- Ensinnäkin CDN ' Sisällönjakeluverkosto ' jQuery- ja kosketustapahtumia varten lisätään '
' -tunnistetta, jotta ne ovat käytettävissä. CDN:t löytyvät viralliselta sivulta jQuerysta ja käymällä cdnjs:ssä vastaavasti. - Seuraavaksi luodaan kaksi painikeelementtiä tunnuksella ' t ' ja ' dt ”. Luo myös ' s ' elementti, jonka tunnus on ' kohde ”. Kosketustapahtuman toiminto suoritetaan tälle elementille.
- Sisällä '
- Ensinnäkin CDN ' Sisällönjakeluverkosto ' jQuery- ja kosketustapahtumia varten lisätään '