Extender allows adding an extra togglable keyset; it's set to add a "numpad" layout by default, but can be set to any layout.

Demos:

• Basic
• Multiple layouts

<!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- jQuery UI theme or Bootstrap (optional, if you create a custom theme) --> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery UI position utility (optional, if you position the keyboard yourself) --> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> <!-- keyboard widget css & script --> <link href="css/keyboard.css" rel="stylesheet"> <script src="js/jquery.keyboard.js"></script> <script src="js/jquery.keyboard.extension-extender.js"></script> <!-- optional plugins --> <script src="js/jquery.mousewheel.js"></script>

This CSS has been included in the keyboard.css file to style the extender key.

• If using a lighter color layout, you can uncomment out the fill: #111 background image for a darker icon.
• To change the color of the icon, modify the fill & stroke colors of the keyboard.svg in the css/images folder in your text editor, then encode it using this site.

/*** Extender keyboard extension (included in the keyboard.css file) ***/ div.ui-keyboard-extender { margin-left: 5px; } button.ui-keyboard-extender span { width: .9em; height: .9em; display: inline-block; margin-bottom: 3px; background-repeat: no-repeat; background-position: center center; background-size: contain; /* light theme extender icon - fill: #111 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6IzExMSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzExMSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+); } .ui-keyboard-dark-theme button.ui-keyboard-extender span { /* dark theme extender icon - fill: #eee */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6I2VlZSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2VlZSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+); }

• This extension adds a 'numpad' layout which has this template:

  'numpad' : { 'normal' : [ '{clear} / * -', '7 8 9 +', '4 5 6 %', '1 2 3 =', '0 {dec} {left} {right}' ] }

• When using the extender extension, an {extender} button may also be included in your layout to allow the user to toggle the extender layout.

  $('#keyboard').keyboard({ layout: 'custom', customLayout : { 'normal': [ '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}', '{tab} q w e r t y u i o p [ ] \\', 'a s d f g h j k l ; \' {enter}', '{shift} z x c v b n m , . / {shift}', '{accept} {space} {cancel} {extender}' ], 'shift': [ '~ ! @ # $ % ^ & * ( ) _ + {bksp}', '{tab} Q W E R T Y U I O P { } |', 'A S D F G H J K L : " {enter}', '{shift} Z X C V B N M < > ? {shift}', '{accept} {space} {cancel} {extender}' ] } }).addExtender({ layout : 'numpad', showing : false, reposition : true });

Default: "numpad"
Type: String

Name of the layout to be used by the extender. The extender container is placed inside of the keyboard.$keyboard container.

Any already defined layouts can be used, but only the normal (default) keyset will be used.

Default: false
Type: Boolean

This options sets the current (or initial) view of the extender layout.

If an {extender} key is added to the keyboard, the user will be able to toggle the view of the extender layout.

You can programmically toggle the extender layout using the extender_toggle() method (see below).

Default: true
Type: Boolean

When set to true, the keyboard will automatically reposition the keyboard; but only:

• After the extender layout view has toggled.
• If the main plugin repostiion option is true, appendTo is set to 'body' (default), and jQuery UI position utility has been included.

This function can be called without any parameters to toggle the current view of the extender layout.

// Toggle extender view $('#keyboard').data('keyboard').extender_toggle();

or pass a boolean value to make the extender layout visible (true), or to hide the layout (false).

// Make extender layout visible $('#keyboard').data('keyboard').extender_toggle(true); // Hide extender layout $('#keyboard').data('keyboard').extender_toggle(false);