Membuat Keyboard Shortcut Menggunakan jQuery Mousetrap

Plugin jQuery Mousetrap adalah plugin jQuery yang berfungsi untuk menambahkan Keyboard Shortcut pada halaman website kalian. Nah pada kesempatan kali ini saya akan memberikan contoh bagaimana caranya membuat Keyboard Shortcut pada halaman website menggunakan jQuery Mousetrap. Cara nya sangat mudah sekali, disini saya akan menggunakan Framework CSS Bootstrap untuk membuat tampilan Website nya.

Pada contoh yang akan saya buat, jika kalian menekan keyboard J atau K maka kalian akan melihat perubahan pada tampilan Post, sedangkan jika kalian menekan keyboard T maka kalian akan mentweet Post yang sedang kalian pilih. Nah pada contoh tersebut saya juga akan memberikan keterangan atau bantuan Keyboard Shortcut apa saja yang ada di halaman contoh website tersebut, kalian cukup menekan keyboard shift + ? untuk memunculkan keterangan tersebut.

Pertama kalian bisa membuat tampilan website nya seperti gambar di bawah ini.

Selanjutnya kalian bisa menghubungkan file jQuery Mousetrap nya dengan HTML yang sudah kalian buat. Di sini saya menggunakan Plugin jQuery Mousetrap CDN untuk membuat contoh halaman website tersebut.

Dan yang terakhir kalian bisa buat file javascript dan tuliskan script di bawah ini di dalam file javascript tersebut dan kalian bisa menghubungkan kembali javascript tersebut di HTML kalian.

Demo | Download

7 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat