jQuery.keyboard

Demo

How it works

This plugin takes a keyboard "definition" and generate it. Some special events are triggered when user interacts with it.
In order to manage interactions, you can add "plugin" to the keyboard (form plugin in the demo).

Events

print: Triggered when a keyboard key is released if it has no defined action.
release: Triggered just after print event, even if the key has an action defined.

Methods

keyboard('addRow', row): Add a row to the keyboard
keyboard('addKey', row, key): Add a key to the row. Row is an int from 0.
keyboard('addKeys', row, key): Add a multiple keys to the row. Row is an int from 0.
keyboard('bind', …same args as jQuery.bind): Bind a callback to a keyboard event
keyboard('cap' [, lock]): Set the cap state to true. The cap will be locked if lock is true
keyboard('unCap'): Set the cap state to false.
keyboard('capToggle' [, lock]): Toggle the cap state. The cap will be locked if lock is true
keyboard('keyboard' [, mixed keyboard]): Return the current keyboard element. If a keyboard definition (or definition name) is passed, the keyboard i regenerated.
keyboard('plug', plugin): Set a plugin for the keyboard

Keyboard definitions

Keyboard definitions are arrays. Each value is an array symbolizing a keyboard row containing keys.

$.keyboard.keyboards.exemple = [
    ['a']
]

Key definition

The simplest way to defind a key, here are exemples from the simplest to the most defined:

// The simplest
'a',

// same as first one
{text:'a',cap:'A'},

// added some alternate glyphes
{text:'a', alt:['à']},

// same as previous one
{text:'a', alt:['à'], cap: {text:'A', alt:['À']}},

// name is added as [classPrefix:keyboard]-key-[name]
// action function will be called and no print event will be triggered
{text:'⇪',name:'capsLock',action:function(e){e.keyboard('capToggle',true); return false;}}

Issues

There is some problem with IE. The selection plugin I made, used by the form keyboard plugin isn't working very well :/