Get new jQuery plugins just once a week

×

visualkeys

FavoriteLoadingAdd to favorites

April 1, 2016

Visualkeys | A Visual approach to keyboard shortcuts for jQuery

VisualKeys is a jQuery plugin for a better visual approach to keyboard shortcuts for jQuery

Created by Fernando Miçalli

Download

visualkeys jQuery plugin

keyboard shortcuts

visualKeys

VisualKeys is a jQuery plugin to configure shortcuts to users most used actions. It's best on web interfaces where users have to execute repetitive tasks giving them a faster way to do the job.

Menu

Install

Add dist/visualkeys-[version].min.js and dist/visualkeys-[version].min.css to your page

<link href="visualkeys-[version].min.css" rel="stylesheet"/>
<script src="jquery-[version].min.js"></script>
<script src="visualkeys-[version].min.js"></script>

Usage

$.visualkeys(options);

options is an object with the following properties:

{
  86 : { // key press to execute shortcut
    text : '<i>[key]</i><b>command</b> description', // text to show on menu
    exec : function(){/* will be executed when key is pressed */},
    hide : function(){/* will hide this menu item if this returns true */}
  }
}

The hide option can be used as a context. To show, for example, a shortcut that exists on one page but not on the other:

hide : function() { return ('page.selector').length > 0; }

Other options

Demo

There is a example at web/index.html

visualkeys

Related posts:

Select
Plax
traceit-js

To install using Bower
bower install visualkeys

visualkeys jQuery plugin

http://jquer.in/wp-content/uploads/2015/11/visualkeys.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever