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). Untuk plugin JQuery Shortcuts 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

<html>
  <head>
   <title>jQuery Validation</title>
   <script src="jquery.js"></script>
   <script src="jquery.shortcuts.min.js"></script>

   <script>
   $.Shortcuts.add({
    type: 'down',
    mask: 'P',
    handler: function() {
        window.print();
    }
   }).start();
   </script>

   <script>
   $.Shortcuts.add({
    type: 'down',
    mask: 'CTRL+G',
    handler: function() {
        window.open('http://www.google.com', '_self');
    }
    }).start();
   </script>

   <script>
   $.Shortcuts.add({
    type: 'down',
    mask: 'ALT+R',
    handler: function() {
        window.open('http://blog.rosihanari.net', '_blank');
    }
   }).start();
   </script>

   <script>
   $.Shortcuts.add({
    type: 'down',
    mask: 'F8',
    handler: function() {
        document.getElementById('title').innerHTML="Hallo";
    }
   }).start();
   </script>

   <script>
   $.Shortcuts.add({
    type: 'down',
    mask: 'F9',
    handler: function() {
        document.getElementById('title').innerHTML="Contoh Shortcut Action";
    }
   }).start();
   </script>

  </head>
  <body>
    <h1 id="title">Contoh Shortcut Action</h1>
    <ol>
       <li>Cetak Halaman (P)</li>
       <li>Buka Situs Google (CTRL+G)</li>
       <li>Buka Situs Blog.RosihanAri.Net di window baru (ALT+R)</li>
       <li>Ubah title menjadi 'Hallo' (F8)</li>
       <li>Ubah title menjadi 'Contoh Shortcut Action' (F9)</li>
    </ol>
  </body>
</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.

Tuesday, May 14, 2013

Membuat Shortcut Action Di Halaman Web dengan JQuery

No comments:

Post a Comment