Extension Extender

Extender

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

Setup

Page Head

<!-- 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>

CSS

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+);
}

Javascript

• 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
  });

Options

layout

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.

showing

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).

reposition

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.

Methods

extender_toggle

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);