httP Mapped keys Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by martin_m_n_novy

HTML

<link rel="stylesheet" href="http://mottie.github.com/Keyboard/css/keyboard.css">
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.js"></script>
<script src="http://mottie.github.com/Keyboard/js/jquery.mousewheel.js"></script>
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.extension-autocomplete.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<div class="container">
  <div id="keyboard">

  </div>
  <div id="keyboard-wrapper">
    First Name: <input type="text" class="keyboard">
    <br/> Last Name: <input type="text" class="keyboard">
  </div>
</div>

CSS

.container {
  display: flex;
}

#keyboard-wrapper {
  flex: 0.4;
  margin: 30px auto;
}

#keyboard {
  flex: 0.6;
  margin: 30px auto;
}

JavaScript

$('.keyboard').keyboard({
	alwaysOpen: true,
  usePreview: false,
  appendTo: '#keyboard',
  position: false,
  reposition: false,
  tabNavigation: true,
////});
////  // *** Mapped keys ***
////$('#map').keyboard({
	layout: 'custom',
	customLayout: {
		'normal' : [
			// "n(a):title_or_tooltip"; n = new key, (a) = actual key, ":label" = title_or_tooltip (use an underscore "_" in place of a space " ")
			'\u03b1(a):lower_case_alpha_(type_a) \u03b2(b):lower_case_beta_(type_b) \u03b3(c):lower_case_gamma_(type_c) \u03b4(d):lower_case_delta_(type_d) \u03b5(e):lower_case_epsilon_(type_e) \u03b6(f):lower_case_zeta_(type_f) \u03b7(g):lower_case_eta_(type_g)', // lower case Greek
			'{shift} {accept} {cancel}'
		],
		'shift' : [
			'\u0391(A) \u0392(B) \u0393(C) \u0394(D) \u0395(E) \u0396(F) \u0397(G)', // upper case Greek
			'{shift} {accept} {cancel}'
		]
	} ////,
	////usePreview: false // no preveiw
});