aj
/
chamilo-lms2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>Virtual Keyboard</title>

	<!-- jQuery (required) & jQuery UI + theme (optional) -->
	<link href="docs/css/jquery-ui.min.css" rel="stylesheet">
	<!-- still using jQuery v2.2.4 because Bootstrap doesn't support v3+ -->
	<script src="docs/js/jquery-latest.min.js"></script>
	<script src="docs/js/jquery-ui.min.js"></script>
	<!-- <script src="docs/js/jquery-migrate-3.0.0.min.js"></script> -->

	<!-- keyboard widget css & script (required) -->
	<link href="css/keyboard.css" rel="stylesheet">
	<script src="js/jquery.keyboard.js"></script>

	<!-- keyboard extensions (optional) -->
	<script src="js/jquery.mousewheel.js"></script>
	<script src="js/jquery.keyboard.extension-typing.js"></script>
	<script src="js/jquery.keyboard.extension-autocomplete.js"></script>
	<script src="js/jquery.keyboard.extension-caret.js"></script>

	<!-- demo only -->
	<link rel="stylesheet" href="docs/css/bootstrap.min.css">
	<link rel="stylesheet" href="docs/css/font-awesome.min.css">
	<link href="docs/css/demo.css" rel="stylesheet">
	<link href="docs/css/tipsy.css" rel="stylesheet">
	<link href="docs/css/prettify.css" rel="stylesheet">
	<script src="docs/js/bootstrap.min.js"></script>
	<script src="docs/js/demo.js"></script>
	<script src="docs/js/jquery.tipsy.min.js"></script>
	<script src="docs/js/prettify.js"></script> <!-- syntax highlighting -->
</head>
<body>

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" name="top">
				<span class="fa fa-keyboard-o fa-lg"></span>
			</a>
		</div>

		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
				<li><a href="docs/basic.html">Basic</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Layouts <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="docs/layouts.html">Standard</a></li>
						<li><a href="docs/layouts2.html">Greywyvern</a></li>
						<li><a href="docs/layouts3.html">Microsoft Keyboard</a></li>
						<li><a href="docs/calculator.html"><span class="fa fa-calculator fa-lg"></span> Calculator</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Extensions <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="docs/altkeys-popup.html">Alt-keys</a></li>
						<li><a href="#autocomplete">Autocomplete</a></li>
						<li><a href="#caret">Caret</a></li>
						<li><a href="docs/extender.html">Extender</a></li>
						<li><a href="docs/preview-keyset.html">Keyset</a></li>
						<li><a href="docs/mobile.html">Mobile</a></li>
						<li><a href="docs/jquery-mobile-1.4.html">Mobile v1.4</a></li>
						<li><a href="docs/navigate.html">Navigate</a></li>
						<li><a href="docs/scramble.html">Scramble</a></li>
						<li><a href="#typing">Typing</a></li>
					</ul>
				</li>
				<li><a href="https://jsfiddle.net/Mottie/egb3a1sk/"><span class="fa fa-flask fa-lg"></span> Playground</a></li>
			</ul>

			<ul class="nav navbar-nav navbar-right">
				<li><a href="https://github.com/Mottie/Keyboard"><span class="fa fa-github fa-lg" title="GitHub"></span></a></li>
				<li><a href="https://github.com/Mottie/Keyboard/archive/master.zip"><span class="fa fa-download fa-lg" title="Download"></span></a></li>
				<li><a href="https://github.com/Mottie/Keyboard/wiki"><span class="fa fa-file-text-o fa-lg" title="Documentation"></span></a></li>
				<li><a href="https://github.com/Mottie/Keyboard/issues"><span class="fa fa-bug fa-lg" title="Issues"></span></a></li>
			</ul>

		</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</nav>

<div id="page-wrap">

	<h1>
		<a href="https://github.com/Mottie/Keyboard">Virtual Keyboard</a><br>
		<small class="version"></small>
	</h1>
	<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=Mottie&amp;repo=keyboard&amp;type=fork&amp;count=true" width="90" height="20" title="Fork on GitHub"></iframe>
	<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=Mottie&amp;repo=keyboard&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
	<h5>Original by
		<a class="external" href="https://jsatt.blogspot.com/2010/01/on-screen-keyboard-widget-using-jquery.html">Jeremy Satterfield</a>,
		updated &amp; maintained by <a class="external" href="https://wowmotty.blogspot.com/2010/11/jquery-ui-keyboard-widget.html">Rob Garrison</a>
	</h5>

	<ul id="console">
		<li>...</li>
		<li>...</li>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>

	<h5>
		Click inside the input or textarea to open the keyboard<br>
		Click on the keyboard title, then scroll down to see its code
	</h5>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Contenteditable</span>
		</h2>
		<div id="contenteditable" contenteditable="true">This
is a <em>content editable</em> div with a custom keyboard
<strong>layout</strong>. Press <kbd>Enter</kbd> to add new lines.</div>
		<br>
		<small>
			* Contenteditable support (v1.27.0-beta).<br>
			* <code>usePreview</code> disabled.<br>
			* Custom layout used.
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;div id="contenteditable" contenteditable="true"&gt;This
is a &lt;em&gt;content editable&lt;/em&gt; div with a custom keyboard
&lt;strong&gt;layout&lt;/strong&gt;. Press &lt;kbd&gt;Enter&lt;/kbd&gt; to add new lines.&lt;/div&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$.keyboard.keyaction.undo = function (base) {
	base.execCommand('undo');
	return false;
};
$.keyboard.keyaction.redo = function (base) {
	base.execCommand('redo');
	return false;
};

$('#contenteditable').keyboard({
	usePreview: true, // disabled for contenteditable
	useCombos: false,
	autoAccept: true,
	layout: 'custom',
	customLayout: {
		'normal': [
			'` 1 2 3 4 5 6 7 8 9 0 - = {del} {b}',
			'{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} {left} {right} {undo:Undo} {redo:Redo}'
		],
		'shift': [
			'~ ! @ # $ % ^ & * ( ) _ + {del} {b}',
			'{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} {left} {right} {undo:Undo} {redo:Redo}'
		]
	},
	display: {
		del: '\u2326:Delete',
		redo: '↻',
		undo: '↺'
	}
})
.addTyping();</pre>
		</div>
	</div>

	<div class="block" id="autocomplete">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">QWERTY Text</span>
		</h2>
		<input id="text" type="text" placeholder=" Enter something...">
		<br>
		<small>
			* Placeholder (watermark).<br>
			* <a href="https://github.com/Mottie/Keyboard/wiki/Extension-Autocomplete">Autocomplete</a> extension.
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;input id="text" type="text" placeholder=" Enter something..."&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">// Autocomplete demo
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
	"COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
	"Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];

$('#text')
	.keyboard({ layout: 'qwerty' })
	.autocomplete({
		source: availableTags
	})
	// position options added after v1.23.4
	.addAutocomplete({
		position : {
			of : null,        // when null, element will default to kb.$keyboard
			my : 'right top', // 'center top', (position under keyboard)
			at : 'left top',  // 'center bottom',
			collision: 'flip'
		}
	})
	.addTyping();</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">QWERTY Password</span>
			<img id="password-opener" class="tooltip-tipsy" title="Click to open the virtual keyboard" src="css/images/keyboard.svg">
		</h2>
		<input id="password" type="password">
		<br>
		<small>
			* Click icon to open keyboard.<br>
			* Stay open until accept/cancel/esc.<br>
			* Key hover disabled in this type.<br>
			* Demo: Reveal letters with <a class="external" href="https://jsfiddle.net/Mottie/24n8wsak/">Caret extension</a>.
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;img id="passwd" class="tooltip-tipsy" title="Click to open the virtual keyboard" src="css/images/keyboard.svg"&gt;
&lt;input id="password" type="password"&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#password')
	.keyboard({
		openOn : null,
		stayOpen : true,
		layout : 'qwerty'
	})
	.addTyping();

$('#password-opener').click(function(){
	var kb = $('#password').getkeyboard();
	// close the keyboard if the keyboard is visible and the button is clicked a second time
	if ( kb.isOpen ) {
		kb.close();
	} else {
		kb.reveal();
	}
});</pre>
		</div>
	</div>

	<div class="block" id="caret">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">QWERTY (mod) Text Area</span>
		</h2>
		<textarea id="qwerty-mod"></textarea>
		<br>
		<small>
			* Locked input (no manual input).<br>
			* Known readonly bug in Safari.<br>
			* <a href="https://github.com/Mottie/Keyboard/wiki/Extension-Caret">Caret</a> extension.
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;textarea id="qwerty-mod"&gt;&lt;/textarea&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#qwerty-mod')
	.keyboard({
		lockInput: true, // prevent manual keyboard entry
		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} {left} {right}'
			],
			'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 &lt; &gt; ? {shift}',
				'{accept} {space} {left} {right}'
			]
		}
	})
	.addCaret({
		// extra class name added to the caret
		// "ui-keyboard-caret" class is always added
		caretClass : '',
		// *** for future use ***
		// data-attribute containing the character(s) next to the caret
		charAttr   : 'data-character',
		// # character(s) next to the caret (can be negative for RTL)
		charIndex  : 1,
		// caret position adjustments
		offsetX    : 0,
		offsetY    : 0
	})
	.addTyping();</pre>
		<h4>CSS</h4>
		<pre class="prettyprint lang-css">.ui-keyboard-caret {
	background: #c00;
	width: 1px;
	margin-top: 3px;
}</pre>
		</div>
	</div>

	<div class="block" id="typing">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">International</span>
			<img id="inter-type" class="tooltip-tipsy" title="Try out the typing extension!" src="css/images/keyboard.svg">
		</h2>
		<textarea id="inter"></textarea>
		<br>
		<small>
			* <a class="external" href="https://bootswatch.com/darkly/">Bootswatch Darkly</a> theme.<br>
			* <a href="https://github.com/Mottie/Keyboard/wiki/Extension-Typing">Typing</a> extension.<br>
			* See basic non-library <a class="external" href="https://jsfiddle.net/Mottie/jsh0377k/">theme</a>.
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;img id="inter-type" class="tooltip-tipsy" title="Try out the typing extension!" src="css/images/keyboard.svg"&gt;
&lt;textarea id="inter"&gt;&lt;/textarea&gt;</pre>
			<h4>CSS</h4>
			<pre class="prettyprint lang-css">/* override bootstrap active state */
button.btn-default:active {
	background-color: #FFF;
	-webkit-box-shadow: none;
	box-shadow: none;
}
button.btn-default:active:hover {
	background-color: #3276B1;
}
/* override Bootstrap excessive button padding */
button.ui-keyboard-button.btn {
	padding: 1px 6px;
}
/* Bootswatch Darkly input is too bright */
.ui-keyboard-input.light, .ui-keyboard-preview.light { color: #222; background: #ddd; }
.ui-keyboard-input.dark, .ui-keyboard-preview.dark { color: #ddd; background: #222; }
</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#inter')
	.keyboard({
		layout: 'international',
		css: {
			// input & preview
			// "label-default" for a darker background
			// "light" for white text
			input: 'form-control input-sm dark',
			// keyboard container
			container: 'center-block well',
			// default state
			buttonDefault: 'btn btn-default',
			// hovered button
			buttonHover: 'btn-primary',
			// Action keys (e.g. Accept, Cancel, Tab, etc);
			// this replaces "actionClass" option
			buttonAction: 'active',
			// used when disabling the decimal button {dec}
			// when a decimal exists in the input area
			buttonDisabled: 'disabled'
		}
	})
	.addTyping();

// Script - typing extension
// simulate typing into the keyboard, use:
// \t or {t} = tab, \b or {b} = backspace, \r or \n or {e} = enter
// added {l} = caret left, {r} = caret right & {d} = delete
$('#inter-type').click(function(){
	$('#inter').getkeyboard().reveal().typeIn("{t}Hal{l}{l}{d}e{r}{r}l'o{b}o {e}{t}World", 500);
	return false;
});</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Alphabetical</span>
		</h2>
		<textarea id="alpha"></textarea>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;textarea id="alpha"&gt;&lt;/textarea&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#alpha')
	.keyboard({ layout: 'alpha' })
	.addTyping();</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Colemak</span>
		</h2>
		<textarea id="colemak"></textarea>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;textarea id="colemak"&gt;&lt;/textarea&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#colemak')
	.keyboard({ layout: 'colemak' })
	.addTyping();</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Dvorak</span>
		</h2>
		<textarea id="dvorak"></textarea>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;textarea id="dvorak"&gt;&lt;/textarea&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#dvorak')
	.keyboard({ layout: 'dvorak' })
	.addTyping();</pre>
		</div>
	</div>


	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Num Pad</span>
		</h2>
		<input id="num" class="alignRight" type="text">
		<br>
		<small>
			* Input restricted.<br>
			* Pasting (ctrl-v) not allowed.<br>
			* Auto accept content.
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;input id="num" class="alignRight" type="text"&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#num')
	.keyboard({
		layout : 'num',
		restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
		preventPaste : true,  // prevent ctrl-v and right click
		autoAccept : true
	})
	.addTyping();</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Hex</span>
		</h2>
		<input id="hex" type="text">
		<br>
		<small>
			* maxLength = 6.<br>
			* Input restricted.<br>
			* Lowercase included.<br>
			* Valid @ length = 6.
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">
&lt;input id="hex" type="text"&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#hex')
	.keyboard({
		layout: 'custom',
		customLayout: {
			'normal' : [
				'C D E F',
				'8 9 A B',
				'4 5 6 7',
				'0 1 2 3',
				'{bksp} {a} {c}'
			]
		},
		maxLength : 6,
		// Prevent keys not in the displayed keyboard from being typed in
		restrictInput : true,
		// include lower case characters (added v1.25.7)
		restrictInclude : 'a b c d e f',
		// don't use combos or A+E could become a ligature
		useCombos : false,
		// activate the "validate" callback function
		acceptValid : true,
		validate : function(keyboard, value, isClosing){
			// only make valid if input is 6 characters in length
			return value.length === 6;
		}
	})
	.addTyping();</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Meta Sets</span>
			<img id="meta-type" class="tooltip-tipsy" title="Try out the typing extension!" src="css/images/keyboard.svg">
		</h2>
		<textarea id="meta"></textarea>
		<br>
		<small>
			* <a href="https://github.com/Mottie/Keyboard/wiki/Extension-Typing">Typing</a> extension.<br>
			* Keyboard opens showing last keyset.<br>
			* userClosed set (accept/cancel to close).
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;textarea id="meta"&gt;&lt;/textarea&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#meta')
	.keyboard({
		// keyboard will open showing last key set used
		resetDefault: false,
		userClosed: true, // keyboard open until user closes with accept or cancel
		autoAccept: true, // required for userClosed: true
		layout: 'custom',
		display: {
			'alt'    : 'AltGr:It\'s all Greek to me',
			// in v1.26.8, meta keys can be named `meta` followed by any letter, underscore or dash.
			// older versions would only allow the name `meta` followed by a number, then any letter or underscore
			// see https://github.com/Mottie/Keyboard/issues/504
			'meta1'  : '\u2666:end of alphabet', // Diamond with label that shows in the title (spaces are okay here)
			'meta-2' : '\u2665:Russian',         // Heart
			'meta3'  : '\u2663:zodiac',          // Club
			'meta_9' : '\u2660:numbers'          // Spade
		},
		customLayout: {
			'normal' : [
				// Add labels using a ":" after the key's name and replace spaces with "_"
				// without the labels this line is just 'a b c d e f g'
				'a:a_letter,_that_sounds_like_"ey" b:a_bug_that_makes_honey c:is_when_I_look_around d:a_grade,_I_never_got e:is_what_girls_say_when_they_run_away_from_me f:u,_is_what_I_say_to_those_screaming_girls! g:gee,_is_that_the_end_of_my_wittiness?',
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'shift' : [
				'A B C D E F G',
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'alt' : [
				'\u03b1 \u03b2 \u03b3 \u03b4 \u03b5 \u03b6 \u03b7', // lower case Greek
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'alt-shift' : [
				'\u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397', // upper case Greek
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'meta1' : [
				't u v w x y z', // lower case end of alphabet
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'meta1-shift' : [
				'T U V W X Y Z', // upper case
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'meta1-alt' : [
				'0 9 8 7 6 5 4', // numbers
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'meta1-alt-shift' : [
				') ( * & ^ % $', // shifted numbers
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'meta-2' : [
				'\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', // lower case Russian
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'meta-2-shift' : [
				'\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', // upper case Russian
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'meta3' : [
				'\u2648 \u2649 \u264A \u264B \u264C \u264D \u264E', // Zodiac
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			],
			'meta_9' : [
				'1 2 3 4 5 6 7', // only because I ran out of ideas
				'{shift} {alt} {meta1} {meta-2} {meta3} {meta_9}',
				'{bksp} {sp:1} {accept} {cancel}'
			]
		}
	})
	.addTyping();

// Script - typing extension
var meta = $('#meta').getkeyboard();
meta
	.reveal()
	.typeIn('aBcD1112389\u0411\u2648\u2649', 700, function(){
		meta.accept();
		alert('all done!');
	});</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Junk</span>
		</h2>
		<textarea id="junk"></textarea>
		<br>
		<small>
			* Use shift key - see action key sizes.<br>
			* Use the decimal - only one allowed.<br>
			* Toggle combo key included.<br>
			* Type in 'ae' and other combo keys.<br>
			* Accept content to see the callback.
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;textarea id="junk"&gt;&lt;/textarea&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#junk')
	.keyboard({
		layout: 'custom',
		customLayout: {
			'normal' : [
				'a e i o u y c',
				'` \' " ~ ^ {dec} {combo}',
				'{tab} {enter} {bksp}',
				'{space}',
				'{accept} {cancel} {shift}'
			],
			'shift' : [
				'A E I O U Y C',
				'` \' " ~ ^ {dec} {combo}',
				'{t} {sp:1} {e} {sp:1} {b}',
				'{space}',
				'{a} {sp:1} {c} {sp:1} {s}'
			]
		},
		// Added here as an example on how to add combos
		combos : {
			'a' : { e: '\u00e6' },
			'A' : { E: '\u00c6' }
		},
		// example callback function
		accepted : function(e, keyboard, el){ alert('The content "' + el.value + '" was accepted!'); }
	})
	.addTyping();</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Mapped Keys</span>
		</h2>
		<textarea id="map"></textarea>
		<br>
		<small>
			* No preview window.<br>
			* Type in a-g.<br>
			* Type in A-G (shifted).<br>
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;textarea id="map"&gt;&lt;/textarea&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">// *** 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
});</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Hidden</span>
		</h2>
		<a href="#" class="hiddenInput">Hidden input</a>
		<!-- DON'T use type="hidden" because IE doesn't like hidden inputs -->
		<input id="hidden" type="text" style="display:none;">
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;a href="#" class="hiddenInput"&gt;Hidden input&lt;/a&gt;
&lt;!-- DON'T use type="hidden" because IE doesn't like hidden inputs --&gt;
&lt;input id="hidden" type="text" style="display:none;"&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">// *** Hidden input example ***
// click on a link - add focus to hidden input
$('.hiddenInput').click(function(){
	$('#hidden').data('keyboard').reveal();
	return false;
});
// Initialize keyboard script on hidden input
// set "position.of" to the same link as above
$('#hidden')
	.keyboard({
		layout   : 'qwerty',
		position : {
			of : $('.hiddenInput'),
			my : 'center top',
			at : 'center top'
		}
	})
	.addTyping();</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: iPad</span>
		</h2>
		<textarea id="ipad"></textarea>
		<br>
		<small>
			* Thanks to <a class="external" href="https://github.com/gitaarik">gitaarik</a> for sharing!.
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;textarea id="ipad"&gt;&lt;/textarea&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#ipad').keyboard({

	display: {
		'bksp'   :  "\u2190",
		'accept' : 'return',
		'normal' : 'ABC',
		'meta1'  : '.?123',
		'meta2'  : '#+='
	},

	layout: 'custom',
	customLayout: {
		'normal': [
			'q w e r t y u i o p {bksp}',
			'a s d f g h j k l {enter}',
			'{s} z x c v b n m , . {s}',
			'{meta1} {space} {meta1} {accept}'
		],
		'shift': [
			'Q W E R T Y U I O P {bksp}',
			'A S D F G H J K L {enter}',
			'{s} Z X C V B N M ! ? {s}',
			'{meta1} {space} {meta1} {accept}'
		],
		'meta1': [
			'1 2 3 4 5 6 7 8 9 0 {bksp}',
			'- / : ; ( ) \u20ac & @ {enter}',
			'{meta2} . , ? ! \' " {meta2}',
			'{normal} {space} {normal} {accept}'
		],
		'meta2': [
			'[ ] { } # % ^ * + = {bksp}',
			'_ \\ | ~ &lt; &gt; $ \u00a3 \u00a5 {enter}',
			'{meta1} . , ? ! \' " {meta1}',
			'{normal} {space} {normal} {accept}'
		]
	}

});</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: iPad email</span>
		</h2>
		<textarea id="ipad-email"></textarea>
		<br>
		<small>
			* Thanks to <a class="external" href="https://github.com/gitaarik">gitaarik</a> for sharing!.
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;textarea id="ipad-email"&gt;&lt;/textarea&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#ipad-email').keyboard({

	display: {
		'bksp'   : '\u2190',
		'enter'  : 'return',
		'normal' : 'ABC',
		'meta1'  : '.?123',
		'meta2'  : '#+=',
		'accept' : '\u21d3'
	},

	layout: 'custom',
	customLayout: {
		'normal': [
			'q w e r t y u i o p {bksp}',
			'a s d f g h j k l {enter}',
			'{s} z x c v b n m @ . {s}',
			'{meta1} {space} _ - {accept}'
		],
		'shift': [
			'Q W E R T Y U I O P {bksp}',
			'A S D F G H J K L {enter}',
			'{s} Z X C V B N M @ . {s}',
			'{meta1} {space} _ - {accept}'
		],
		'meta1': [
			'1 2 3 4 5 6 7 8 9 0 {bksp}',
			'` | { } % ^ * / \' {enter}',
			'{meta2} $ & ~ # = + . {meta2}',
			'{normal} {space} ! ? {accept}'
		],
		'meta2': [
			'[ ] { } \u2039 \u203a ^ * " , {bksp}',
			'\\ | / &lt; &gt; $ \u00a3 \u00a5 \u2022 {enter}',
			'{meta1} \u20ac & ~ # = + . {meta1}',
			'{normal} {space} ! ? {accept}'
		]
	}

});</pre>
		</div>
	</div>

	<div class="block">
		<h2>
			<span class="tooltip-tipsy" title="Click, then scroll down to see this code">Custom: Lockable</span>
		</h2>
		<input id="lockable" type="text">
		<br>
		<small>
			* cursor arrow keys.<br>
			* keyboard enable/disable toggle.<br>
			* include {del} key (opposite of {bksp})
		</small>
		<div class="code ui-corner-all">
			<h4>HTML</h4>
			<pre class="prettyprint lang-html">&lt;input id="lockable" type="text"&gt;</pre>
			<h4>Script</h4>
			<pre class="prettyprint lang-js">$('#lockable').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} {left} {right} {sp:.2} {del} {toggle}'
		],
		'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 &lt; &gt; ? {shift}',
			'{accept} {space} {left} {right} {sp:.2} {del} {toggle}'
		]
	},
	css: {
		// add dark themed class to keyboard popup
		// to use bright svg padlock icon
		popup : 'ui-keyboard-dark-theme'
	}
})
.addTyping();</pre>
		</div>
	</div>


	<div id="showcode"></div>

	<div id="footer"></div>

</div>

</body></html>