This repository has been archived by the owner on Jan 26, 2024. It is now read-only.
forked from Mottie/Keyboard
-
Notifications
You must be signed in to change notification settings - Fork 2
Theme
Mottie edited this page May 10, 2013
·
15 revisions
-
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-alt-shift'- Alt plus shift key set -
'ui-keyboard-keyset-meta#'- Meta key set (# can be any number) -
'ui-keyboard-keyset-meta#-shift'- Meta shift active (upper case keys). -
'ui-keyboard-keyset-meta#-alt'- Meta alt key set. -
'ui-keyboard-keyset-meta#-alt-shift'- Meta alt plus shift key set
-
-
If you would like an "x" within the input to clear the text input field, please use the input search type (demo). Older browsers will not support this type of input, and there is no plan to include more code to provide this functionality.
<input id="keyboard" type="search">
-
Not included in the
keyboard.cssfile is the styling of a browser supported placeholder. Use the following to style the placeholder text (each entry must be on a separate line):::-webkit-input-placeholder { color: #aaa; } :-moz-placeholder { color: #aaa; } ::-moz-placeholder { color: #aaa; } :-ms-input-placeholder { color: #aaa; } /* plugin placeholder; not used if browser supported */ .ui-keyboard-placeholder { color: #aaa; }
-
The basic keyboard markup is as follows, using the basic QWERTY layout (Note this format was changed in version 1.8.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">
<!-- preview window -->
<div>
<!-- This input started as a clone of the above target input, except that the ID was removed -->
<input type="text" class="ui-keyboard-input ui-widget-content ui-corner-all ui-keyboard-preview" role="textbox">
</div>
<!-- ** default key set ** -->
<div name="default" class="ui-keyboard-keyset ui-keyboard-keyset-default">
<!-- first row -->
<button role="button" class="ui-keyboard-96 ui-keyboard-button ui-state-default ui-corner-all" data-value="`" name="key_0_0"><span>`</span></button>
<button role="button" class="ui-keyboard-49 ui-keyboard-button ui-state-default ui-corner-all" data-value="1" name="key_0_1"><span>1</span></button>
<button role="button" class="ui-keyboard-50 ui-keyboard-button ui-state-default ui-corner-all" data-value="2" name="key_0_2"><span>2</span></button>
<button role="button" class="ui-keyboard-51 ui-keyboard-button ui-state-default ui-corner-all" data-value="3" name="key_0_3"><span>3</span></button>
<button role="button" class="ui-keyboard-52 ui-keyboard-button ui-state-default ui-corner-all" data-value="4" name="key_0_4"><span>4</span></button>
<button role="button" class="ui-keyboard-53 ui-keyboard-button ui-state-default ui-corner-all" data-value="5" name="key_0_5"><span>5</span></button>
<button role="button" class="ui-keyboard-54 ui-keyboard-button ui-state-default ui-corner-all" data-value="6" name="key_0_6"><span>6</span></button>
<button role="button" class="ui-keyboard-55 ui-keyboard-button ui-state-default ui-corner-all" data-value="7" name="key_0_7"><span>7</span></button>
<button role="button" class="ui-keyboard-56 ui-keyboard-button ui-state-default ui-corner-all" data-value="8" name="key_0_8"><span>8</span></button>
<button role="button" class="ui-keyboard-57 ui-keyboard-button ui-state-default ui-corner-all" data-value="9" name="key_0_9"><span>9</span></button>
<button role="button" class="ui-keyboard-48 ui-keyboard-button ui-state-default ui-corner-all" data-value="0" name="key_0_10"><span>0</span></button>
<button role="button" class="ui-keyboard-45 ui-keyboard-button ui-state-default ui-corner-all" data-value="-" name="key_0_11"><span>-</span></button>
<button role="button" class="ui-keyboard-61 ui-keyboard-button ui-state-default ui-corner-all" data-value="=" name="key_0_12"><span>=</span></button>
<button role="button" class="ui-keyboard-bksp ui-keyboard-widekey ui-keyboard-actionkey ui-keyboard-button ui-state-default ui-corner-all" data-value="Bksp" name="key_bksp" title="Backspace"><span>Bksp</span></button>
<br class="ui-keyboard-button-endrow">
<button role="button" class="ui-keyboard-tab ui-keyboard-widekey ui-keyboard-actionkey ui-keyboard-button ui-state-default ui-corner-all" data-value="⇥ Tab" name="key_tab" title="Tab"><span>⇥ Tab</span></button>
<button role="button" class="ui-keyboard-113 ui-keyboard-button ui-state-default ui-corner-all" data-value="q" name="key_1_1"><span>q</span></button>
<button role="button" class="ui-keyboard-119 ui-keyboard-button ui-state-default ui-corner-all" data-value="w" name="key_1_2"><span>w</span></button>
<button role="button" class="ui-keyboard-101 ui-keyboard-button ui-state-default ui-corner-all" data-value="e" name="key_1_3"><span>e</span></button>
<button role="button" class="ui-keyboard-114 ui-keyboard-button ui-state-default ui-corner-all" data-value="r" name="key_1_4"><span>r</span></button>
<button role="button" class="ui-keyboard-116 ui-keyboard-button ui-state-default ui-corner-all" data-value="t" name="key_1_5"><span>t</span></button>
<button role="button" class="ui-keyboard-121 ui-keyboard-button ui-state-default ui-corner-all" data-value="y" name="key_1_6"><span>y</span></button>
<button role="button" class="ui-keyboard-117 ui-keyboard-button ui-state-default ui-corner-all" data-value="u" name="key_1_7"><span>u</span></button>
<button role="button" class="ui-keyboard-105 ui-keyboard-button ui-state-default ui-corner-all" data-value="i" name="key_1_8"><span>i</span></button>
<button role="button" class="ui-keyboard-111 ui-keyboard-button ui-state-default ui-corner-all" data-value="o" name="key_1_9"><span>o</span></button>
<button role="button" class="ui-keyboard-112 ui-keyboard-button ui-state-default ui-corner-all" data-value="p" name="key_1_10"><span>p</span></button>
<button role="button" class="ui-keyboard-91 ui-keyboard-button ui-state-default ui-corner-all" data-value="[" name="key_1_11"><span>[</span></button>
<button role="button" class="ui-keyboard-93 ui-keyboard-button ui-state-default ui-corner-all" data-value="]" name="key_1_12"><span>]</span></button>
<button role="button" class="ui-keyboard-92 ui-keyboard-button ui-state-default ui-corner-all" data-value="\" name="key_1_13"><span>\</span></button>
<br class="ui-keyboard-button-endrow">
<button role="button" class="ui-keyboard-97 ui-keyboard-button ui-state-default ui-corner-all" data-value="a" name="key_2_0"><span>a</span></button>
<button role="button" class="ui-keyboard-115 ui-keyboard-button ui-state-default ui-corner-all" data-value="s" name="key_2_1"><span>s</span></button>
<button role="button" class="ui-keyboard-100 ui-keyboard-button ui-state-default ui-corner-all" data-value="d" name="key_2_2"><span>d</span></button>
<button role="button" class="ui-keyboard-102 ui-keyboard-button ui-state-default ui-corner-all" data-value="f" name="key_2_3"><span>f</span></button>
<button role="button" class="ui-keyboard-103 ui-keyboard-button ui-state-default ui-corner-all" data-value="g" name="key_2_4"><span>g</span></button>
<button role="button" class="ui-keyboard-104 ui-keyboard-button ui-state-default ui-corner-all" data-value="h" name="key_2_5"><span>h</span></button>
<button role="button" class="ui-keyboard-106 ui-keyboard-button ui-state-default ui-corner-all" data-value="j" name="key_2_6"><span>j</span></button>
<button role="button" class="ui-keyboard-107 ui-keyboard-button ui-state-default ui-corner-all" data-value="k" name="key_2_7"><span>k</span></button>
<button role="button" class="ui-keyboard-108 ui-keyboard-button ui-state-default ui-corner-all" data-value="l" name="key_2_8"><span>l</span></button>
<button role="button" class="ui-keyboard-59 ui-keyboard-button ui-state-default ui-corner-all" data-value=";" name="key_2_9"><span>;</span></button>
<button role="button" class="ui-keyboard-39 ui-keyboard-button ui-state-default ui-corner-all" data-value="'" name="key_2_10"><span>'</span></button>
<button role="button" class="ui-keyboard-enter ui-keyboard-widekey ui-keyboard-actionkey ui-state-active ui-keyboard-button ui-state-default ui-corner-all" data-value="Enter" name="key_enter" title="Enter"><span>Enter</span></button>
<br class="ui-keyboard-button-endrow">
<button role="button" class="ui-keyboard-shift ui-keyboard-widekey ui-keyboard-actionkey ui-keyboard-button ui-state-default ui-corner-all" data-value="Shift" name="key_shift" title="Shift"><span>Shift</span></button>
<button role="button" class="ui-keyboard-122 ui-keyboard-button ui-state-default ui-corner-all" data-value="z" name="key_3_1"><span>z</span></button>
<button role="button" class="ui-keyboard-120 ui-keyboard-button ui-state-default ui-corner-all" data-value="x" name="key_3_2"><span>x</span></button>
<button role="button" class="ui-keyboard-99 ui-keyboard-button ui-state-default ui-corner-all" data-value="c" name="key_3_3"><span>c</span></button>
<button role="button" class="ui-keyboard-118 ui-keyboard-button ui-state-default ui-corner-all" data-value="v" name="key_3_4"><span>v</span></button>
<button role="button" class="ui-keyboard-98 ui-keyboard-button ui-state-default ui-corner-all" data-value="b" name="key_3_5"><span>b</span></button>
<button role="button" class="ui-keyboard-110 ui-keyboard-button ui-state-default ui-corner-all" data-value="n" name="key_3_6"><span>n</span></button>
<button role="button" class="ui-keyboard-109 ui-keyboard-button ui-state-default ui-corner-all" data-value="m" name="key_3_7"><span>m</span></button>
<button role="button" class="ui-keyboard-44 ui-keyboard-button ui-state-default ui-corner-all" data-value="," name="key_3_8"><span>,</span></button>
<button role="button" class="ui-keyboard-46 ui-keyboard-button ui-state-default ui-corner-all" data-value="." name="key_3_9"><span>.</span></button>
<button role="button" class="ui-keyboard-47 ui-keyboard-button ui-state-default ui-corner-all" data-value="/" name="key_3_10"><span>/</span></button>
<button role="button" class="ui-keyboard-shift ui-keyboard-widekey ui-keyboard-actionkey ui-keyboard-button ui-state-default ui-corner-all" data-value="Shift" name="key_shift" title="Shift"><span>Shift</span></button>
<br class="ui-keyboard-button-endrow">
<button role="button" class="ui-keyboard-accept ui-keyboard-widekey ui-keyboard-actionkey ui-state-active ui-keyboard-button ui-state-default ui-corner-all" data-value="Accept" name="key_accept" title="Accept"><span>Accept</span></button>
<button role="button" class="ui-keyboard-space ui-keyboard-widekey ui-keyboard-actionkey ui-keyboard-button ui-state-default ui-corner-all" data-value="space" name="key_space"><span>space</span></button>
<button role="button" class="ui-keyboard-cancel ui-keyboard-widekey ui-keyboard-actionkey ui-state-active ui-keyboard-button ui-state-default ui-corner-all" data-value="Cancel" name="key_cancel" title="Cancel"><span>Cancel</span></button>
<br class="ui-keyboard-button-endrow">
</div>
<!-- ** end default keyset ** -->
<!-- ** shift key set ** -->
<div name="shift" class="ui-keyboard-keyset ui-keyboard-keyset-shift" style="display: none;">
<button role="button" class="ui-keyboard-126 ui-keyboard-button ui-state-default ui-corner-all" data-value="~" name="key_0_0"><span>~</span></button>
<button role="button" class="ui-keyboard-33 ui-keyboard-button ui-state-default ui-corner-all" data-value="!" name="key_0_1"><span>!</span></button>
<button role="button" class="ui-keyboard-64 ui-keyboard-button ui-state-default ui-corner-all" data-value="@" name="key_0_2"><span>@</span></button>
<button role="button" class="ui-keyboard-35 ui-keyboard-button ui-state-default ui-corner-all" data-value="#" name="key_0_3"><span>#</span></button>
<button role="button" class="ui-keyboard-36 ui-keyboard-button ui-state-default ui-corner-all" data-value="$" name="key_0_4"><span>$</span></button>
<button role="button" class="ui-keyboard-37 ui-keyboard-button ui-state-default ui-corner-all" data-value="%" name="key_0_5"><span>%</span></button>
<button role="button" class="ui-keyboard-94 ui-keyboard-button ui-state-default ui-corner-all" data-value="^" name="key_0_6"><span>^</span></button>
<button role="button" class="ui-keyboard-38 ui-keyboard-button ui-state-default ui-corner-all" data-value="&" name="key_0_7"><span>&</span></button>
<button role="button" class="ui-keyboard-42 ui-keyboard-button ui-state-default ui-corner-all" data-value="*" name="key_0_8"><span>*</span></button>
<button role="button" class="ui-keyboard-40 ui-keyboard-button ui-state-default ui-corner-all" data-value="(" name="key_0_9"><span>(</span></button>
<button role="button" class="ui-keyboard-41 ui-keyboard-button ui-state-default ui-corner-all" data-value=")" name="key_0_10"><span>)</span></button>
<button role="button" class="ui-keyboard-95 ui-keyboard-button ui-state-default ui-corner-all" data-value="_" name="key_0_11"><span>_</span></button>
<button role="button" class="ui-keyboard-43 ui-keyboard-button ui-state-default ui-corner-all" data-value="+" name="key_0_12"><span>+</span></button>
<button role="button" class="ui-keyboard-bksp ui-keyboard-widekey ui-keyboard-actionkey ui-keyboard-button ui-state-default ui-corner-all" data-value="Bksp" name="key_bksp" title="Backspace"><span>Bksp</span></button>
<br class="ui-keyboard-button-endrow">
<button role="button" class="ui-keyboard-tab ui-keyboard-widekey ui-keyboard-actionkey ui-keyboard-button ui-state-default ui-corner-all" data-value="⇥ Tab" name="key_tab" title="Tab"><span>⇥ xTab</span></button>
<button role="button" class="ui-keyboard-81 ui-keyboard-button ui-state-default ui-corner-all" data-value="Q" name="key_1_1"><span>Q</span></button>
<button role="button" class="ui-keyboard-87 ui-keyboard-button ui-state-default ui-corner-all" data-value="W" name="key_1_2"><span>W</span></button>
<button role="button" class="ui-keyboard-69 ui-keyboard-button ui-state-default ui-corner-all" data-value="E" name="key_1_3"><span>E</span></button>
<button role="button" class="ui-keyboard-82 ui-keyboard-button ui-state-default ui-corner-all" data-value="R" name="key_1_4"><span>R</span></button>
<button role="button" class="ui-keyboard-84 ui-keyboard-button ui-state-default ui-corner-all" data-value="T" name="key_1_5"><span>T</span></button>
<button role="button" class="ui-keyboard-89 ui-keyboard-button ui-state-default ui-corner-all" data-value="Y" name="key_1_6"><span>Y</span></button>
<button role="button" class="ui-keyboard-85 ui-keyboard-button ui-state-default ui-corner-all" data-value="U" name="key_1_7"><span>U</span></button>
<button role="button" class="ui-keyboard-73 ui-keyboard-button ui-state-default ui-corner-all" data-value="I" name="key_1_8"><span>I</span></button>
<button role="button" class="ui-keyboard-79 ui-keyboard-button ui-state-default ui-corner-all" data-value="O" name="key_1_9"><span>O</span></button>
<button role="button" class="ui-keyboard-80 ui-keyboard-button ui-state-default ui-corner-all" data-value="P" name="key_1_10"><span>P</span></button>
<button role="button" class="ui-keyboard-123 ui-keyboard-button ui-state-default ui-corner-all" data-value="{" name="key_1_11"><span>{</span></button>
<button role="button" class="ui-keyboard-125 ui-keyboard-button ui-state-default ui-corner-all" data-value="}" name="key_1_12"><span>}</span></button>
<button role="button" class="ui-keyboard-124 ui-keyboard-button ui-state-default ui-corner-all" data-value="|" name="key_1_13"><span>|</span></button>
<br class="ui-keyboard-button-endrow">
<button role="button" class="ui-keyboard-65 ui-keyboard-button ui-state-default ui-corner-all" data-value="A" name="key_2_0"><span>A</span></button>
<button role="button" class="ui-keyboard-83 ui-keyboard-button ui-state-default ui-corner-all" data-value="S" name="key_2_1"><span>S</span></button>
<button role="button" class="ui-keyboard-68 ui-keyboard-button ui-state-default ui-corner-all" data-value="D" name="key_2_2"><span>D</span></button>
<button role="button" class="ui-keyboard-70 ui-keyboard-button ui-state-default ui-corner-all" data-value="F" name="key_2_3"><span>F</span></button>
<button role="button" class="ui-keyboard-71 ui-keyboard-button ui-state-default ui-corner-all" data-value="G" name="key_2_4"><span>G</span></button>
<button role="button" class="ui-keyboard-72 ui-keyboard-button ui-state-default ui-corner-all" data-value="H" name="key_2_5"><span>H</span></button>
<button role="button" class="ui-keyboard-74 ui-keyboard-button ui-state-default ui-corner-all" data-value="J" name="key_2_6"><span>J</span></button>
<button role="button" class="ui-keyboard-75 ui-keyboard-button ui-state-default ui-corner-all" data-value="K" name="key_2_7"><span>K</span></button>
<button role="button" class="ui-keyboard-76 ui-keyboard-button ui-state-default ui-corner-all" data-value="L" name="key_2_8"><span>L</span></button>
<button role="button" class="ui-keyboard-58 ui-keyboard-button ui-state-default ui-corner-all" data-value=":" name="key_2_9"><span>:</span></button>
<button role="button" class="ui-keyboard-34 ui-keyboard-button ui-state-default ui-corner-all" data-value=""" name="key_2_10"><span>"</span></button>
<button role="button" class="ui-keyboard-enter ui-keyboard-widekey ui-keyboard-actionkey ui-state-active ui-keyboard-button ui-state-default ui-corner-all" data-value="Enter" name="key_enter" title="Enter"><span>Enter</span></button>
<br class="ui-keyboard-button-endrow">
<button role="button" class="ui-keyboard-shift ui-keyboard-widekey ui-keyboard-actionkey ui-keyboard-button ui-state-default ui-corner-all" data-value="Shift" name="key_shift" title="Shift"><span>Shift</span></button>
<button role="button" class="ui-keyboard-90 ui-keyboard-button ui-state-default ui-corner-all" data-value="Z" name="key_3_1"><span>Z</span></button>
<button role="button" class="ui-keyboard-88 ui-keyboard-button ui-state-default ui-corner-all" data-value="X" name="key_3_2"><span>X</span></button>
<button role="button" class="ui-keyboard-67 ui-keyboard-button ui-state-default ui-corner-all" data-value="C" name="key_3_3"><span>C</span></button>
<button role="button" class="ui-keyboard-86 ui-keyboard-button ui-state-default ui-corner-all" data-value="V" name="key_3_4"><span>V</span></button>
<button role="button" class="ui-keyboard-66 ui-keyboard-button ui-state-default ui-corner-all" data-value="B" name="key_3_5"><span>B</span></button>
<button role="button" class="ui-keyboard-78 ui-keyboard-button ui-state-default ui-corner-all" data-value="N" name="key_3_6"><span>N</span></button>
<button role="button" class="ui-keyboard-77 ui-keyboard-button ui-state-default ui-corner-all" data-value="M" name="key_3_7"><span>M</span></button>
<button role="button" class="ui-keyboard-60 ui-keyboard-button ui-state-default ui-corner-all" data-value="<" name="key_3_8"><span><</span></button>
<button role="button" class="ui-keyboard-62 ui-keyboard-button ui-state-default ui-corner-all" data-value=">" name="key_3_9"><span>></span></button>
<button role="button" class="ui-keyboard-63 ui-keyboard-button ui-state-default ui-corner-all" data-value="?" name="key_3_10"><span>?</span></button>
<button role="button" class="ui-keyboard-shift ui-keyboard-widekey ui-keyboard-actionkey ui-keyboard-button ui-state-default ui-corner-all" data-value="Shift" name="key_shift" title="Shift"><span>Shift</span></button>
<br class="ui-keyboard-button-endrow">
<button role="button" class="ui-keyboard-accept ui-keyboard-widekey ui-keyboard-actionkey ui-state-active ui-keyboard-button ui-state-default ui-corner-all" data-value="Accept" name="key_accept" title="Accept"><span>Accept</span></button>
<button role="button" class="ui-keyboard-space ui-keyboard-widekey ui-keyboard-actionkey ui-keyboard-button ui-state-default ui-corner-all" data-value="space" name="key_space"><span>space</span></button>
<button role="button" class="ui-keyboard-cancel ui-keyboard-widekey ui-keyboard-actionkey ui-state-active ui-keyboard-button ui-state-default ui-corner-all" data-value="Cancel" name="key_cancel" title="Cancel"><span>Cancel</span></button>
<br class="ui-keyboard-button-endrow">
</div> <!-- ** end shift keyset ** -->
</div> <!-- end wrapper -->Wiki Pages: Home | FAQ | Setup | Usage | Options ( Layout, Language, Usability, Actions ) | Methods | Theme | Log