Theme

Wiki Pages: Home | Setup | Options ( Layout, Language, Useability ) | Methods | Theme | Log

Theme / Style

• The keyboard is set up to match the current jQuery UI theme, but it is still highly customizable with CSS.

• The basic css, shown above, has no color styling but can have styling added to override the jQuery UI theme.

• Action keys will have a class name of "ui-keyboard-{name}". So "bksp" (backspace) will have the class name of "ui-keyboard-bksp".

• All other keys will have the unicode decimal value of the first character in the class name ("ui-keyboard-#"). So the tidle character has a unicode decimal value of 126, the class name will be "ui-keyboard-126". This is the same as typing ~ into the page or alt-0126 (hold down the alt key and press 0126 in the keypad).

• Key sets are named as follows:

  • 'ui-keyboard-keyset-default' - Default (lower case keys)
  • 'ui-keyboard-keyset-shift' - Shift active (upper case keys).
  • 'ui-keyboard-keyset-alt' - Alt key set.
  • 'ui-keyboard-keyset-altshift' - Alt plus shift key set
  • 'ui-keyboard-keyset-meta#' - Meta key set (# can be any number)

• The basic keyboard markup is as follows, using the basic QWERTY layout (Note this format was changed in version 1.5.3):

    <!-- Target Input (script is initialized on this element by targeting "#keyboard") -->
    <input id="keyboard" class="ui-keyboard-input ui-widget-content ui-corner-all" type="text">
    
    <!-- Keyboard wrapper (QWERTY layout) -->
    <div class="ui-keyboard ui-widget-content ui-widget ui-corner-all ui-helper-clearfix ui-helper-hidden-accessible">
      <!-- preview window -->
      <div>
        <input type="text" class="qwerty ui-keyboard-input ui-widget-content ui-corner-all ui-keyboard-preview">
      </div>
      <!-- ** default key set ** -->
      <div class="ui-keyboard-keyset ui-keyboard-keyset-default">
        <!-- first row -->
        <div class="ui-keyboard-row ui-keyboard-row0">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-96" name="key_0_0" value="`">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-49" name="key_0_1" value="1">
          <!-- ... -->
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-61" name="key_0_12" value="=">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-bksp ui-keyboard-widekey ui-keyboard-actionkey" name="key_bksp" value="Bksp">
        </div>
        <!-- ... -->
        <!--  fifth row -->
        <div class="ui-keyboard-row ui-keyboard-row4">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-accept ui-keyboard-widekey ui-keyboard-actionkey ui-state-active" name="key_accept" value="Accept">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-space ui-keyboard-widekey ui-keyboard-actionkey" name="key_space" value="Space">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-cancel ui-keyboard-widekey ui-keyboard-actionkey ui-state-active" name="key_cancel" value="Cancel">
        </div>
      </div>
      <!--  ** end default keyset ** -->
      <!-- ** shift= key set ** -->
      <div class="ui-keyboard-keyset ui-keyboard-keyset-shift" style="display: none;">
        <!-- first row -->
        <div class="ui-keyboard-row ui-keyboard-row0">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-126" name="key_0_0" value="~">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-33" name="key_0_1" value="!">
          <!-- ... -->
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-43" name="key_0_12" value="+">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-bksp ui-keyboard-widekey ui-keyboard-actionkey" name="key_bksp" value="Bksp">
        </div>
        <!-- ... -->
        <!--  fifth row -->
        <div class="ui-keyboard-row ui-keyboard-row4">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-accept ui-keyboard-widekey ui-keyboard-actionkey ui-state-active" name="key_accept" value="Accept">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-space ui-keyboard-widekey ui-keyboard-actionkey" name="key_space" value="Space">
          <input type="button" class="ui-keyboard-button ui-state-default ui-corner-all ui-keyboard-cancel ui-keyboard-widekey ui-keyboard-actionkey ui-state-active" name="key_cancel" value="Cancel">
        </div> <!-- end fifth row -->
      </div> <!--  ** end shift keyset ** -->
    </div> <!-- end wrapper -->