În crearea de site-uri web dinamice receptive, dezvoltatorul trebuie să gestioneze gesturile mobile precum ciupirea, atingerea și glisarea. Aceste gesturi sunt gestionate de limbaje de dezvoltare mobile precum „ fluturare ” sau ” reacţionează nativ ” și JavaScript. Alte programe web nu se ocupă de acest tip de eveniment. Din fericire! Cu ajutorul jQuery „ eveniment atingere ” plugin, aceste evenimente sau gesturi pot fi, de asemenea, gestionate.
Acest blog va ilustra procesul de utilizare a pluginului jQuery pentru evenimente tactile pentru dispozitive mobile.
Cum să utilizați pluginul jQuery Touch Events pentru telefoane mobile?
jQuery retrage diferențele dintre evenimentele tactile și evenimentele mobile pentru a utiliza API-uri sau plugin-uri coerente precum „ eveniment atingere ”. Există mai multe evenimente furnizate de acest plugin care sunt menționate mai jos în formă tabelară:
| biciuind rața | Invocă o anumită funcție la sfârșitul glisării peste un element. |
| scrollstart | Invocă o funcție specifică la începutul defilării pe elementul selectat. |
| defilare | Invocă o funcție specifică la sfârșitul defilării pe element. |
| schimbare de orientare | Declanșează o funcție atunci când orientarea dispozitivului sau a telefonului mobil este schimbată, ca deplasarea în portret din aspectul peisaj. |
Sintaxă
Sintaxa pentru evenimentele jQuery touch este prezentată mai jos:
$ ( 'acest' ) .touchEvent ( func ( ) {
// Codul tau
} )
În sintaxa de mai sus:
-
- „ acest ” este selectorul care este o acțiune ca apelant de acțiune sau element selectat.
- „ touchEvent ” este denumirea specifică a evenimentului care este utilizat, se poate întâmpla din tabelul de mai sus.
- „ func() ” este funcția personalizată care va fi executată de evenimentul tactil furnizat.
Acum, să vizităm câteva exemple pentru o mai bună înțelegere a evenimentelor tactile.
Exemplul 1: Utilizarea Tap și DoubleTap
În acest exemplu, „ touchEvent „eveniment” Atingeți ' și ' apasare dubla ” va fi folosit pentru a invoca sau a efectua o funcție asupra unui element selectat:
< html >< cap >
< script src = „https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js” > scenariu >
< scenariu src = „https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js” >
scenariu >
cap >
< corp >
< h3 stil = 'culoare: cadetblue;' > Linux h3 >
< buton id = 't' > Atingeți buton >
< buton id = 'dt' > Apasare dubla buton >
< p id = 'ţintă' > Exemplul de evenimente DoubleTap și Tap Touch. p >
< scenariu >
$ ( '#t' ) .Atingeți ( funcţie ( ) {
$ ( '#ţintă' ) .ascunde ( ) ;
} )
$ ( „#dt” ) .apasare dubla ( funcţie ( ) {
$ ( '#ţintă' ) .spectacol ( ) ;
} )
scenariu >
corp >
html >
Explicația codului de mai sus:
-
- În primul rând, CDN-ul „ Rețeaua de livrare de conținut ” pentru jQuery și evenimentele tactile va fi inserat în interiorul „
” etichetă pentru a le face accesibile. CDN-urile pot fi găsite pe oficial de jQuery și prin vizitarea cdnj-urilor respectiv. - În continuare, două elemente de buton sunt create cu un id de „ t ' și ' dt ”. De asemenea, creați un „ p ” element cu id-ul „ ţintă ”. Acțiunea prin evenimentul tactil va fi efectuată asupra acestui element.
- În interiorul '
- În primul rând, CDN-ul „ Rețeaua de livrare de conținut ” pentru jQuery și evenimentele tactile va fi inserat în interiorul „