Salah satu kelebihan pemograman berbasis dekstop seperti Visual Basic atau Java adalah bisa menggunakan shortcut untuk menangani event untuk suatu proses pada aplikasi. misalnya anda bisa membuat ketika pengguna menekan F12 maka sistem akan menyimpan transaksi, F1 untuk menghapus semua list transaksi dan banyak hal lainya yang bisa digunakan. lalu apakah bisa kita membuat hal serupa pada aplikasi berbasis web ?, jawaban nya sekarang bisa dan pada postingan kali ini kita akan belajar membuat fitur seperti ini.
Jquery Hotkeys Library
library ini dibuat oleh seorang developer bernama Tzury Bar Yochay dan library ini juga sudah di fork oleh John Resig sang developer dibalik lahirnya jquery. secara umum cara penggunaan library ini adalah sebagai berikut :
$(expression).bind(types.keys, handler);
$(expression).unbind(types.keys, handler);
$(document).bind('keydown.ctrl_a', fn);
// e.g. replace '$' sign with 'EUR'
$('input.foo').bind('keyup.$', function(){
this.value = this.value.replace('$', 'EUR');
});
kalau anda masih bingung, saya akan berikan satu contoh lagi yang bisa anda pelajari, jadi asumsinya adalah kita akan membuat 2 buah button yang masing masing mewakili proses yang ada pada sebuah form. jika pengguna menekan tombol F2 maka sistem akan menyimpan data dan jika pengguna menekan tombol F1 maka sistem akan menghapus daftar transaksi. tapi ini cuman contoh ya jadi hanya akan memunculkan Alert saja, berikut ini script nya :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajarphp.net</title>
</head>
<script src="jquery_hotkeys/jquery-1.4.2.js"></script>
<script src="jquery_hotkeys/jquery.hotkeys.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).bind('keydown', 'f2', function() {
alert('Menyimpan Data');
});
$(document).bind('keydown', 'f3', function() {
alert('Clear Data');
});
});
</script>
<body>
<button type="button">SAVE [F2]</button>
<button type="button">CLEAR [F3]</button>
</body>
</html>
sekian postingan kali ini, sekarang anda sudah bisa membuat aplikasi anda menjadi lebih interaktif dengan adanya fitur ini.
Komentar
Posting Komentar