Dalam pembuatan situs web responsif dinamis, pengembang juga perlu menangani gerakan seluler seperti mencubit, mengetuk, dan menggeser. Isyarat ini ditangani oleh bahasa pengembangan seluler seperti “ berdebar ' atau ' bereaksi asli ” dan JavaScript. Pemrograman web lain tidak menangani kejadian semacam ini. Untunglah! Dengan bantuan “ acara sentuh ” Plugin, peristiwa atau isyarat ini juga dapat ditangani.
Blog ini akan mengilustrasikan proses penggunaan plugin acara jQuery touch untuk ponsel.
Bagaimana Cara Menggunakan Plugin jQuery Touch Events untuk Ponsel?
jQuery mengabstraksi perbedaan antara peristiwa sentuh dan peristiwa seluler untuk menggunakan API atau plugin yang konsisten seperti “ acara sentuh ”. Ada beberapa event yang disediakan oleh plugin ini yang disajikan dalam bentuk tabel di bawah ini:
| mencambuk bebek | Memanggil fungsi tertentu di akhir gesekan pada suatu elemen. |
| gulir mulai | Memanggil fungsi tertentu pada awal pengguliran pada elemen yang dipilih. |
| ujung gulir | Memanggil fungsi tertentu di akhir pengguliran elemen. |
| perubahan orientasi | Mengaktifkan fungsi ketika orientasi perangkat atau seluler berubah seperti berpindah dalam potret dari tata letak lanskap. |
Sintaksis
Sintaks untuk acara sentuh jQuery dinyatakan di bawah ini:
$ ( 'ini' ) .touchEvent ( fungsi ( ) {
// kode Anda
} )
Dalam sintaks di atas:
-
- “ ini ” adalah selector yang merupakan suatu tindakan sebagai pemanggil tindakan atau elemen yang dipilih.
- “ sentuhAcara ” adalah nama acara spesifik yang digunakan, dapat acara dari tabel yang disebutkan di atas.
- “ fungsi() ” adalah fungsi khusus yang akan dijalankan oleh acara sentuh yang disediakan.
Sekarang, mari kita lihat beberapa contoh untuk pemahaman yang lebih baik tentang peristiwa sentuhan.
Contoh 1: Penggunaan Tap dan DoubleTap
Dalam contoh ini, “ sentuhAcara ' peristiwa ' mengetuk ' Dan ' ketuk dua kali ” akan digunakan untuk memanggil atau menjalankan beberapa fungsi pada elemen yang dipilih:
< html >< kepala >
< skrip src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > naskah >
< naskah src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
naskah >
kepala >
< tubuh >
< h3 gaya = 'warna: kadet biru;' > Linux h3 >
< tombol pengenal = 'T' > Mengetuk tombol >
< tombol pengenal = 'dt' > Ketuk dua kali tombol >
< P pengenal = 'target' > Contoh Acara DoubleTap dan Tap Touch. P >
< naskah >
$ ( '#T' ) .mengetuk ( fungsi ( ) {
$ ( '#target' ) .bersembunyi ( ) ;
} )
$ ( '#dt' ) .ketuk dua kali ( fungsi ( ) {
$ ( '#target' ) .menunjukkan ( ) ;
} )
naskah >
tubuh >
html >
Penjelasan kode di atas:
-
- Pertama, CDN “ Jaringan Pengiriman Konten ” untuk jQuery dan acara sentuh akan dimasukkan ke dalam “
” tag agar dapat diakses. CDN dapat ditemukan di situs resmi dari jQuery dan melalui mengunjungi cdnjs masing-masing. - Selanjutnya, dua elemen tombol dibuat dengan id “ T ' Dan ' dt ”. Juga, buatlah “ P ” elemen dengan id “ target ”. Acara aksi dengan sentuhan akan dilakukan pada elemen ini.
- Di dalam '
” tag, pilih elemen dengan id “ T ” dan lampirkan “ mengetuk ” sentuh acara dengannya. Acara ini memilih elemen html lain dengan id “ target ” dan menerapkan “ bersembunyi() ” metode di atasnya. - Selain itu, pilih “ dt ” elemen dan terapkan “ ketuk dua kali ” sentuh acara dan dengan cara yang sama terapkan “ menunjukkan() ” metode pada “ target ” elemen identitas.
- Pertama, CDN “ Jaringan Pengiriman Konten ” untuk jQuery dan acara sentuh akan dimasukkan ke dalam “
Output yang dihasilkan setelah kompilasi kode ditunjukkan di bawah ini:
Output di atas menunjukkan bahwa tindakan telah dilakukan pada peristiwa sentuh “ketuk” dan “ketuk dua kali”.
Contoh 2: Penggunaan Acara Swipe dan Swipeend Touch
Dalam contoh ini, penerapan “ geser ' Dan ' mencambuk bebek ” acara sentuh akan didemonstrasikan:
< naskah >$ ( '#T' ) .geser ( fungsi ( ) {
$ ( '#target' ) .bersembunyi ( ) ;
} )
$ ( '#T' ) .menggesek bebek ( fungsi ( ) {
$ ( '#target' ) .bersembunyi ( ) ;
} )
naskah >
Penjelasan kode jQuery di atas adalah sebagai berikut:
-
- Pertama, elemen yang dipilih dipilih melalui idnya “ T ” dan “ geser ” acara terlampir padanya. Peristiwa ini mengaktifkan suatu fungsi dan fungsi yang diaktifkan tersebut memilih elemen yang ditargetkan melalui id “ target ” dan menerapkan “ bersembunyi() ” metode di atasnya untuk membuat kontennya tidak terlihat.
- Selanjutnya, “ mencambuk bebek ” acara diterapkan pada elemen yang sama dan fungsinya diterapkan pada “ menunjukkan() ” metode pada elemen yang dipilih dengan id “ target ” untuk membuat konten terlihat saat acara geser berakhir.
Output untuk kode di atas dihasilkan sebagai:
Outputnya menunjukkan bahwa konten elemen yang ditargetkan disembunyikan pada saat gesekan dan muncul ketika acara gesekan berakhir.
Contoh 3: Penggunaan Acara Sentuh scrollstart dan scrollend
Dalam hal ini, “ gulir mulai ' Dan ' ujung gulir ” acara sentuh akan dilaksanakan:
< naskah >$ ( '#T' ) .scrollstart ( fungsi ( ) {
$ ( '#target' ) .bersembunyi ( ) ;
} )
$ ( '#T' ) .scrollend ( fungsi ( ) {
$ ( '#target' ) .menunjukkan ( ) ;
} )
naskah >
Penjelasan kode di atas dinyatakan sebagai:
-
- Satu-satunya perubahan dalam contoh ini adalah penggunaan “ gulir mulai ' Dan ' ujung gulir ” acara yang akan dilakukan “ bersembunyi() ' Dan ' menunjukkan() ” metode pada suatu elemen dan kode lainnya akan tetap sama seperti pada contoh di atas.
- Teks yang ditargetkan disembunyikan di awal atau selama pengguliran dan terlihat saat pengguliran berakhir.
Output yang dihasilkan setelah kompilasi kode di atas ditunjukkan di bawah ini:
Outputnya menunjukkan bahwa konten elemen disembunyikan pada saat pengguliran dan terlihat saat pengguliran berakhir.
Blog ini telah menjelaskan plugin acara jQuery touch untuk perangkat seluler.
Kesimpulan
jQuery “ acara sentuh ” plugin untuk seluler, memungkinkan jQuery untuk menambahkan peristiwa yang secara khusus menangani peristiwa yang terjadi pada ponsel sentuh seperti menggesek, mengetuk, mengubah orientasi, dll. Peristiwa yang disediakan oleh plugin ini diimplementasikan seperti tradisional “ klik ” atau acara lainnya. Dengan menggunakan plugin ini, pengembang dapat dengan mudah menerapkan fungsi tertentu sesuai dengan interaksi pengguna dengan ponsel. Blog ini telah menjelaskan plug-in acara jQuery touch untuk seluler.