Dalam penciptaan tapak web responsif dinamik, pembangun perlu mengendalikan gerak isyarat mudah alih seperti mencubit, mengetik dan meleret. Gerak isyarat ini dikendalikan oleh bahasa pembangunan mudah alih seperti “ berkibar ” atau “ bertindak balas asli ” dan JavaScript. Pengaturcaraan web lain tidak mengendalikan acara seperti ini. Nasib baik! Dengan bantuan jQuery ' peristiwa sentuh ” pemalam, acara atau gerak isyarat ini juga boleh dikendalikan.
Blog ini akan menggambarkan proses untuk menggunakan pemalam acara sentuhan jQuery untuk telefon bimbit.
Bagaimana untuk Menggunakan Pemalam Acara Sentuh jQuery untuk Mudah Alih?
jQuery merumuskan perbezaan antara acara sentuh dan acara mudah alih untuk menggunakan API atau pemalam yang konsisten seperti “ peristiwa sentuh ”. Terdapat beberapa acara yang disediakan oleh pemalam ini yang dinyatakan di bawah dalam bentuk jadual:
| itik sebat | Menimbulkan fungsi tertentu pada penghujung leret ke atas elemen. |
| mula tatal | Menjemput fungsi tertentu pada permulaan tatal pada elemen yang dipilih. |
| tatal tatal | Menjemput fungsi tertentu pada penghujung penatalan pada elemen. |
| perubahan orientasi | Menyalakan fungsi apabila orientasi peranti atau mudah alih berubah seperti bergerak dalam potret daripada reka letak landskap. |
Sintaks
Sintaks untuk acara sentuhan jQuery dinyatakan di bawah:
$ ( 'ini' ) .touchEvent ( fungsi ( ) {
// kod anda
} )
Dalam sintaks di atas:
-
- ' ini ” ialah pemilih yang merupakan tindakan sebagai pemanggil tindakan atau elemen terpilih.
- ' touchEvent ” ialah nama acara khusus yang sedang digunakan, ia boleh acara daripada jadual yang dinyatakan di atas.
- ' func() ” ialah fungsi tersuai yang akan dilaksanakan oleh acara sentuh yang disediakan.
Sekarang, mari kita lawati beberapa contoh untuk pemahaman yang lebih baik tentang acara sentuhan.
Contoh 1: Penggunaan Tap dan DoubleTap
Dalam contoh ini, ' touchEvent 'peristiwa' ketuk ” dan “ tekan dua kali ” akan digunakan untuk memanggil atau melaksanakan beberapa fungsi ke atas elemen yang dipilih:
< html >< kepala >
< skrip src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > skrip >
< skrip src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
skrip >
kepala >
< badan >
< h3 gaya = 'warna: kadet biru;' > Linux h3 >
< butang ID = 't' > Ketik butang >
< butang ID = 'dt' > Tekan dua kali butang >
< hlm ID = 'sasaran' > Contoh Peristiwa Sentuh DoubleTap dan Tap. hlm >
< skrip >
$ ( '#t' ) .ketuk ( fungsi ( ) {
$ ( '#target' ) .sembunyi ( ) ;
} )
$ ( '#dt' ) .tekan dua kali ( fungsi ( ) {
$ ( '#target' ) .tunjukkan ( ) ;
} )
skrip >
badan >
html >
Penjelasan kod di atas:
-
- Pertama, CDN ' Rangkaian Penyampaian Kandungan ' untuk jQuery dan acara sentuh akan dimasukkan ke dalam '
teg ” untuk menjadikannya boleh diakses. CDN boleh didapati di laman rasmi daripada jQuery dan melalui melawat cdnjs masing-masing. - Seterusnya, dua elemen butang dicipta dengan id ' t ” dan “ dt ”. Juga, buat ' hlm elemen ” dengan id “ sasaran ”. Tindakan oleh peristiwa sentuhan akan dilakukan pada elemen ini.
- Di dalam '
teg ”, pilih elemen dengan id “ t ” dan lampirkan “ ketuk ” acara sentuh dengannya. Acara ini memilih elemen html lain dengan id ' sasaran ” dan menggunakan “ sembunyikan() ” kaedah di atasnya. - Selain itu, pilih ' dt elemen ” dan gunakan “ tekan dua kali ' peristiwa sentuh dan dengan cara yang sama gunakan ' tunjukkan() ' kaedah pada ' sasaran ” unsur id.
- Pertama, CDN ' Rangkaian Penyampaian Kandungan ' untuk jQuery dan acara sentuh akan dimasukkan ke dalam '
Output yang dihasilkan selepas penyusunan kod ditunjukkan di bawah:
Output di atas menunjukkan bahawa tindakan telah dilakukan pada acara sentuhan 'ketik' dan 'ketik dua kali'.
Contoh 2: Penggunaan Acara Sentuh Leret dan Leret
Dalam contoh ini, pelaksanaan ' leret ” dan “ itik sebat ” peristiwa sentuhan akan ditunjukkan:
< skrip >$ ( '#t' ) .leret ( fungsi ( ) {
$ ( '#target' ) .sembunyi ( ) ;
} )
$ ( '#t' ) .itik meleret ( fungsi ( ) {
$ ( '#target' ) .sembunyi ( ) ;
} )
skrip >
Penerangan kod jQuery di atas adalah seperti berikut:
-
- Pertama, elemen yang dipilih dipilih melalui idnya ' t ' dan juga ' leret ” acara dilampirkan padanya. Peristiwa ini menyalakan fungsi dan fungsi yang dipecat memilih elemen yang disasarkan melalui id “ sasaran ” dan menggunakan “ sembunyikan() ” kaedah di atasnya untuk menjadikan kandungannya tidak kelihatan.
- Seterusnya, ' itik sebat acara ' digunakan pada elemen yang sama dan fungsinya menggunakan ' tunjukkan() ' kaedah ke atas elemen yang dipilih dengan id ' sasaran ” untuk menjadikan kandungan kelihatan apabila acara leret tamat.
Output untuk kod di atas dijana sebagai:
Output menunjukkan bahawa kandungan unsur yang disasarkan akan disembunyikan pada masa leret dan muncul apabila acara leret tamat.
Contoh 3: Penggunaan Peristiwa Sentuh permulaan skrol dan hujung skrol
Dalam kes ini, ' mula tatal ” dan “ tatal tatal ” acara sentuh akan dilaksanakan:
< skrip >$ ( '#t' ) .scrollstart ( fungsi ( ) {
$ ( '#target' ) .sembunyi ( ) ;
} )
$ ( '#t' ) .scrollend ( fungsi ( ) {
$ ( '#target' ) .tunjukkan ( ) ;
} )
skrip >
Penjelasan untuk kod di atas dinyatakan sebagai:
-
- Satu-satunya perubahan dalam contoh ini ialah penggunaan “ mula tatal ” dan “ tatal tatal ' acara untuk dilakukan ' sembunyikan() ” dan “ tunjukkan() ” kaedah ke atas elemen dan selebihnya kod akan kekal sama seperti dalam contoh di atas.
- Teks yang disasarkan disembunyikan pada permulaan atau semasa menatal dan ia kelihatan apabila penatalan tamat.
Output yang dihasilkan selepas penyusunan kod di atas ditunjukkan di bawah:
Output menunjukkan bahawa kandungan elemen disembunyikan pada masa menatal dan ia dapat dilihat apabila penatalan tamat.
Blog ini telah menerangkan pemalam acara sentuhan jQuery untuk peranti mudah alih.
Kesimpulan
jQuery ' peristiwa sentuh ” pemalam untuk mudah alih, membolehkan jQuery menambah acara yang secara khusus mengendalikan peristiwa yang berlaku pada telefon bimbit sentuh seperti meleret, mengetik, perubahan orientasi, dll. Acara yang disediakan oleh pemalam ini dilaksanakan sama seperti tradisional “ onclick ” atau acara lain. Dengan menggunakan pemalam ini, pembangun boleh menggunakan fungsi tertentu dengan mudah mengikut interaksi pengguna dengan mudah alih. Blog ini telah menerangkan palam acara sentuhan jQuery untuk mudah alih.