Web Designer: Cara Membuat Shortcut Action Di Halaman Web dengan JQuery

Di dalam aplikasi desktop, seringkali kita mendengar istilah shortcut action untuk proses-proses tertentu. Sebagai contohnya adalah CTRL+P untuk proses mencetak halaman, CTRL+N membuat dokumen baru, CTRL+S untuk menyimpan dokumen dsb. Nah… bagaimana dengan aplikasi web??? apakah bisa kita menambahkan shortcut ke dalam aplikasi web kita? Misalkan kita ingin membuat shortcut F6 untuk mencetak halaman dari aplikasi web yang kita buat, atau kita ingin membuat beberapa shortcut untuk membuka beberapa halaman web. Misalkan CTRL+1 untuk membuka situs A, CTRL+2 untuk situs B, dst. Hal ini bisa kita wujudkan dengan mudah, dengan bantuan JQuery.

Untuk mewujudkan hal ini, kita membutuhkan script core JQuery nya (jQuery.js) dan plugin JQuery Shortcuts (jquery.shortcuts.min.js). Kedua file script tersebut dapat diunduh di sini.
Selanjutnya, berikut ini saya berikan contoh halaman web yang di dalamnya ada beberapa tombol short cut untuk action tertentu.

contoh.html

view sourceprint?

01.<html>

02.<head>

03.<title>jQuery Validation</title>

04.<script src="jquery.js"></script>

05.<script src="jquery.shortcuts.min.js"></script>

06.

07.<script>

08.$.Shortcuts.add({

09.type: 'down',

10.mask: 'P',

11.handler: function() {

12.window.print();

13.}

14.}).start();

15.</script>

16.

17.<script>

18.$.Shortcuts.add({

19.type: 'down',

20.mask: 'CTRL+G',

21.handler: function() {

22.window.open('http://www.google.com', '_self');

23.}

24.}).start();

25.</script>

26.

27.<script>

28.$.Shortcuts.add({

29.type: 'down',

30.mask: 'ALT+R',

31.handler: function() {

32.window.open('http://blog.rosihanari.net', '_blank');

33.}

34.}).start();

35.</script>

36.

37.<script>

38.$.Shortcuts.add({

39.type: 'down',

40.mask: 'F8',

41.handler: function() {

42.document.getElementById('title').innerHTML="Hallo";

43.}

44.}).start();

45.</script>

46.

47.<script>

48.$.Shortcuts.add({

49.type: 'down',

50.mask: 'F9',

51.handler: function() {

52.document.getElementById('title').innerHTML="Contoh Shortcut Action";

53.}

54.}).start();

55.</script>

56.

57.</head>

58.<body>

59.<h1 id="title">Contoh Shortcut Action</h1>

60.<ol>

61.<li>Cetak Halaman (P)</li>

62.<li>Buka Situs Google (CTRL+G)</li>

63.<li>Buka Situs Blog.RosihanAri.Net di window baru (ALT+R)</li>

64.<li>Ubah title menjadi 'Hallo' (F8)</li>

65.<li>Ubah title menjadi 'Contoh Shortcut Action' (F9)</li>

66.</ol>

67.</body>

68.</html>

Jika halaman web di atas dibuka di browser, maka hanya dengan menekan tombol P pada keyboard Anda dapat mencetak halaman tersebut. Apabila ditekan tombol CTRL + G maka secara otomatis akan membuka situs Google dst.

Adapun berikut ini penjelasan dari script JQuery nya.
view sourceprint?

01.<script>

02.$.Shortcuts.add({

03.type: 'down',

04.mask: 'P',

05.handler: function() {

06.window.print();

07.}

08.}).start();

09.</script>

Block script di atas berfungsi untuk membuat short cut pada tombol ‘P’ pada keyboard untuk menjalankan action mencetak halaman. Perintah cetak halaman ini dilakukan melalui perintah javascript window.print(). Dengan demikian, window.print() ini akan diexecute ketika diklik tombol ‘P’.

Sedangkan block berikut ini digunakan untuk membuka situs Google dengan short cut CTRL + G.

view sourceprint?

01.<script>

02.$.Shortcuts.add({

03.type: 'down',

04.mask: 'CTRL+G',

05.handler: function() {

06.window.open('http://www.google.com', '_self');

07.}

08.}).start();

09.</script>
Untuk membuka situs google tersebut, digunakan perintah window.open().
Mudah bukan membuatnya? Selamat mencoba ya