Nella creazione di siti Web dinamici e reattivi, lo sviluppatore deve gestire anche gesti mobili come pizzicare, toccare e scorrere. Questi gesti sono gestiti da linguaggi di sviluppo mobile come ' svolazzare ' O ' reagire nativo ' e JavaScript. Altra programmazione web non gestisce questo tipo di eventi. Fortunatamente! Con l'aiuto di ' toccare l'evento ', è possibile gestire anche questi eventi o gesti.
Questo blog illustrerà il processo per utilizzare il plug-in eventi touch jQuery per dispositivi mobili.
Come utilizzare il plugin jQuery Touch Events per cellulari?
jQuery astrae le differenze tra eventi touch ed eventi mobili per utilizzare API o plugin coerenti come ' toccare l'evento ”. Ci sono diversi eventi forniti da questo plugin che sono indicati di seguito in forma tabellare:
| sbattere l'anatra | Richiama una funzione specifica alla fine dello scorrimento su un elemento. |
| scrollstart | Richiama una funzione specifica all'inizio dello scorrimento sull'elemento selezionato. |
| scrollend | Richiama una funzione specifica al termine dello scorrimento sull'elemento. |
| cambiamento di orientamento | Attiva una funzione quando l'orientamento del dispositivo o del cellulare viene modificato, come lo spostamento nel layout verticale dal layout orizzontale. |
Sintassi
La sintassi per gli eventi touch jQuery è indicata di seguito:
$ ( 'Questo' ) .touchEvent ( funz ( ) {
// il tuo codice
} )
Nella sintassi sopra:
-
- IL ' Questo ' è il selettore che è un'azione come chiamante di un'azione o elemento selezionato.
- IL ' touchEvento ' è il nome dell'evento specifico utilizzato, può essere selezionato dalla tabella sopra indicata.
- IL ' funzione() ' è la funzione personalizzata che verrà eseguita dall'evento touch fornito.
Ora, visitiamo un paio di esempi per una migliore comprensione degli eventi tattili.
Esempio 1: utilizzo di Tap e DoubleTap
In questo esempio, il ' touchEvento “evento” rubinetto ' E ' doppio tocco ' verrà utilizzato per richiamare o eseguire alcune funzioni su un elemento selezionato:
< html >< Testa >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > sceneggiatura >
< sceneggiatura src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
sceneggiatura >
Testa >
< corpo >
< h3 stile = 'colore: blu cadetto;' > Linux h3 >
< pulsante id = 'T' > Rubinetto pulsante >
< pulsante id = 'dt' > Doppio tocco pulsante >
< P id = 'bersaglio' > Esempio di eventi DoubleTap e Tap Touch. P >
< sceneggiatura >
$ ( '#T' ) .rubinetto ( funzione ( ) {
$ ( '#bersaglio' ) .nascondere ( ) ;
} )
$ ( '#dt' ) .doppio tocco ( funzione ( ) {
$ ( '#bersaglio' ) .spettacolo ( ) ;
} )
sceneggiatura >
corpo >
html >
La spiegazione del codice sopra:
-
- Innanzitutto il CDN” Rete per la distribuzione dei contenuti ' per gli eventi jQuery e touch verrà inserito all'interno del '
' per renderli accessibili. I CDN possono essere trovati sul sito ufficiale di jQuery e visitando il cdnjs rispettivamente. - Successivamente, vengono creati due elementi pulsante con un ID ' T ' E ' dt ”. Inoltre, crea un ' P ' elemento con un ID di ' bersaglio ”. L'azione dell'evento touch verrà eseguita su questo elemento.
- Dentro il '
', seleziona l'elemento con l'ID ' T ' e allega il ' rubinetto 'tocca l'evento con esso. Questo evento seleziona un altro elemento html con un ID di ' bersaglio ' e applica il ' nascondere() 'metodo su di esso. - Inoltre, seleziona ' dt 'Elemento' e applicare il ' doppio tocco ” toccare l'evento e allo stesso modo applicare il “ spettacolo() ' metodo sul ' bersaglio 'elemento identificativo.
- Innanzitutto il CDN” Rete per la distribuzione dei contenuti ' per gli eventi jQuery e touch verrà inserito all'interno del '
L'output generato dopo la compilazione del codice è mostrato di seguito:
L'output sopra mostra che le azioni sono state eseguite sugli eventi di tocco 'tap' e 'doubletap'.
Esempio 2: utilizzo degli eventi touch Swipe e Swipeend
In questo esempio, l’implementazione del “ scorrere ' E ' sbattere l'anatra verranno dimostrati gli eventi touch:
< sceneggiatura >$ ( '#T' ) .scorri ( funzione ( ) {
$ ( '#bersaglio' ) .nascondere ( ) ;
} )
$ ( '#T' ) .anatra che striscia ( funzione ( ) {
$ ( '#bersaglio' ) .nascondere ( ) ;
} )
sceneggiatura >
La descrizione del codice jQuery sopra è la seguente:
-
- Per prima cosa si seleziona l’elemento scelto tramite il suo id “ T ' e il ' scorrere ' l'evento è allegato ad esso. Questo evento attiva una funzione e la funzione attivata seleziona l'elemento target tramite l'id ' bersaglio ' e applica il ' nascondere() ' metodo su di esso per rendere invisibile il suo contenuto.
- Successivamente, il “ sbattere l'anatra ” viene applicato sullo stesso elemento e la sua funzione applica il “ spettacolo() ' sull'elemento selezionato con un ID ' bersaglio ' per rendere visibile il contenuto al termine dell'evento di scorrimento.
L'output per il codice sopra viene generato come:
L'output mostra che il contenuto dell'elemento mirato viene nascosto al momento dello scorrimento e viene visualizzato al termine dell'evento di scorrimento.
Esempio 3: utilizzo degli eventi touch scrollstart e scrollend
In questo caso, il “ scrollstart ' E ' scrollend Verranno implementati gli eventi touch:
< sceneggiatura >$ ( '#T' ) .scrollstart ( funzione ( ) {
$ ( '#bersaglio' ) .nascondere ( ) ;
} )
$ ( '#T' ) .scrollend ( funzione ( ) {
$ ( '#bersaglio' ) .spettacolo ( ) ;
} )
sceneggiatura >
La spiegazione per il codice sopra è indicata come:
-
- L'unico cambiamento in questo esempio è l'uso di ' scrollstart ' E ' scrollend “eventi da svolgere” nascondere() ' E ' spettacolo() ' su un elemento e il resto del codice rimarranno gli stessi dell'esempio precedente.
- Il testo target viene nascosto all'inizio o durante lo scorrimento e diventa visibile al termine dello scorrimento.
L'output generato dopo la compilazione del codice sopra è mostrato di seguito:
L'output mostra che il contenuto dell'elemento è nascosto al momento dello scorrimento e diventa visibile al termine dello scorrimento.
Questo blog ha spiegato i plug-in degli eventi touch jQuery per dispositivi mobili.
Conclusione
Il jQuery “ toccare l'evento 'Plugin per dispositivi mobili, consente a jQuery di aggiungere eventi che gestiscono specificamente gli eventi che si verificano sui dispositivi mobili touch come scorrimento, tocco, cambio di orientamento, ecc. Gli eventi forniti da questo plug-in sono implementati proprio come i tradizionali ' al clic ' o altri eventi. Utilizzando questo plugin, lo sviluppatore può facilmente applicare determinate funzioni in base all'interazione dell'utente con il cellulare. Questo blog ha spiegato il collegamento degli eventi touch jQuery per dispositivi mobili.