Demo

  1. Hit ctrl+space. A menu will appear at the bottom of this page.
  2. Hit v to execute the "view source code" shortcut and see the code bellow.
  3. That's it! You can configure any action to any key.
    You can also alt+shift+v as a faster shortcut.
  4. Try more shortcuts by pressing ctrl+space again.

+view source code for this demo

$.visualkeys({
    86 : {
        text : '<i>v</i><b>View source</b> code from demo',
        exec : function(){$('#example').slideToggle();}
    },
    83 : {
        text : '<i>s</i><b>Save</b> your current work',
        exec : function(){},
        hide : !$('#save').length
    },
    39 : {
        text : '<i>→</i>Align all text to the <b>right</b>',
        exec : function(){$('body').css('text-align','right')}
    },
    66 : {
        text : '<i>b</i>Change <b>background to black</b>',
        exec : function(){$('body').css('background','black')}
    },
    71 : {
        text : '<i>g</i><b>Go to Disney Land</b>',
        exec : function(k, i){ location.href='http://disney.com/'}
    },
    68 : {
        text : '<i>d</i><b>Download</b> VisualKeys',
        exec : function(){location.href=$('#download-link').attr('href')}
    }
});

Install

  1. Add VisualKeys style and script to the <head> of your application. +view code
    <link rel="jquery.visualkeys-1.0.css" />
    <script src="jquery-1.4.2.min.js"></script>
    <script src="jquery.visualkeys-1.0.min.js></script>
  2. Create a VisualKeys configuration based on the actions you want to let your users execute using shortcuts. +view configuration parameters
    $.visualkeys({
        // keycode of the letter user will press to activate the shortcut
        86 : { 
    	
            // Text to display on menu. 
            // <i> for the shortcut letter and <b> for the fade out text
            text : '<i>v</i><b>View source</b> code from demo',
    		
            // JavaScript code to be executed for this shortcut
            exec : function(){$('#example').slideToggle();},
    		
            // Hide shortcuts based on context. Read "More..." section for details
            hide : !$('#example').length // this property is optional
        }
    });
  3. Add your VisualKeys configuration script to your application.

Download

More...

About

Author: Fernando M.A.d.S. <>

License: VisualKeys is distributed under the LGPL