Extension Mobile

Mobile

Switch the keyboard theme to match jQuery Mobile theme styles

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-mobile.js"></script>

<!-- optional plugins -->
<script src="js/jquery.mousewheel.js"></script>

Javascript

// target a specific keyboard, or use $('.ui-keyboard-input') to target all
$('#keyboard')
  .keyboard({
    keyBinding : 'mousedown touchstart',
    alwaysOpen : true
  })
  // For a better idea of what the theme letters represent, try out the mobile
  // demo, or go directly to the jQuery Mobile theming overview page:
  // http://demos.jquerymobile.com/1.4.5/theme-classic/
  .addMobile({
    // keyboard wrapper theme
    container   : { theme:'b', cssClass:'ui-body' },
    // keyboard duplicate input
    input       : { theme:'b', cssClass:'' },
    // theme added to all regular buttons
    buttonMarkup: { theme:'b', cssClass:'ui-btn', shadow:'true', corners:'true' },
    // theme added to all buttons when they are being hovered
    buttonHover : { theme:'b', cssClass:'ui-btn-hover' },
    // theme added to action buttons (e.g. tab, shift, accept, cancel);
    // parameters here will override the settings in the buttonMarkup
    buttonAction: { theme:'b', cssClass:'ui-btn-active' },
    // theme added to button when it is active (e.g. shift is down)
    // All extra parameters will be ignored
    buttonActive: { theme:'b', cssClass:'ui-btn-active' },
    // if more than 3 mobile themes are used, add them here
    allThemes   : 'a b c'
  });

Options

container

Default: { theme:'b', cssClass:'ui-body' }
Type: Object

Set the keyboard wrapper theme and class.

input

Default: { theme:'b', cssClass:'' }
Type: Object

Set the keyboard duplicate input style.

buttonMarkup

Default: { theme:'b', cssClass:'ui-btn', shadow:'true', corners:'true' }
Type; Object

Set the theme for all regular buttons.

buttonHover

Default: { theme:'b', cssClass:'ui-btn-hover' }
Type: Object

Set the theme for all buttons when they are being hovered.

buttonAction

Default: { theme:'b', cssClass:'ui-btn-active' }
Type: Object

Set the theme added to the action buttons (e.g. tab, shift, accept, cancel); parameters here will override the settings in the buttonMarkup option.

buttonActive

Default: { theme:'b', cssClass:'ui-btn-active' }
Type: Object

Set the theme added to a button when it is active (e.g. when shift is down); All extra parameters will be ignored

allthemes

Default: 'a b c'
Type: String

Modify this option if there are more than 3 mobile themes being used.