Free Ebook Tutorial from Rosihan Ari's Blog

Ebook Javascript | Ebook PHP | Ebook AJAX | Ebook CSS | Ebook FPDF | Ebook Wordpress | Ebook Java SE




Membuat Shortcut Action Di Halaman Web dengan JQuery


February 1st, 2013 | by rosihanari |


Jual kaos

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.

 photo jquery-shortcut_zps100c1e06.jpg

Adapun berikut ini penjelasan dari script JQuery nya.

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

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

Untuk membuka situs google tersebut, digunakan perintah window.open().

Mudah bukan membuatnya? Selamat mencoba ya :-)


Kata kunci: jquery plugin - jquery shortcut - jquery tutorial - script jquery -


 

Komentar Anda ...