docs/layouts2.html

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

	<title>Virtual Keyboard Language Layouts</title>

	<!-- demo -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="css/demo.css" rel="stylesheet">

	<!-- jQuery & jQuery UI + theme (required) -->
	<link href="css/jquery-ui.min.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<!-- keyboard widget css & script (required) -->
	<link href="../css/keyboard.css" rel="stylesheet">
	<link href="../css/keyboard-previewkeyset.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-previewkeyset.js"></script>

	<!-- preloaded keyboard layout -->
	<script src="../layouts/keyboard-layouts-greywyvern.js" charset="utf-8"></script>

	<script>
	$(function(){

		var t,
			o = '',
			layouts = [];

		// Change display language, if the definitions are available
		showKb = function(layout){
			var kb = $('#multi').getkeyboard();
			kb.options.layout = layout;
			// true flag causes a keyboard refresh
			kb.reveal(true);
		};

		$.each(jQuery.keyboard.layouts, function(i, l){
			if (l.name) {
				layouts.push([i,l.name]);
			}
		});
		// sort select options by language name, not
		layouts.sort( function( a, b ) {
			return a[1] > b[1] ? 1 : a[1] < b[1] ? -1 : 0;
		});
		$.each(layouts, function(i, l){
			o += '<option value="' + l[0] + '">' + l[1] + '</option>';
		});

		$('#multi').keyboard({
			layout: 'qwerty',
			stayOpen: true
		})
		// activate the typing extension
		.addTyping({
			showTyping: true,
			delay: 200
		})
		.previewKeyset();

		$('#lang')
			.html(o)
			.change(function(){
				var kb = $('#multi'),
					$this = $(this),
					$opt = $this.find('option:selected'),
					layout = $this.val();
				$('h2').text( $opt.text() );
				showKb( layout );
			}).trigger('change');

	});
	</script>
	<style>
	.rtl {
		text-align: right;
	}
	</style>
</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><a href="../index.html">Home</a></li>
				<li><a href="basic.html">Basic</a></li>
				<li class="dropdown active">
					<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="layouts.html">Standard</a></li>
						<li class="active"><a href="layouts2.html">Greywyvern <span class="sr-only">(current)</span></a></li>
						<li><a href="layouts3.html">Microsoft Keyboard</a></li>
						<li><a href="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="altkeys-popup.html">Alt-keys</a></li>
						<li><a href="../index.html#autocomplete">Autocomplete</a></li>
						<li><a href="../index.html#caret">Caret</a></li>
						<li><a href="extender.html">Extender</a></li>
						<li><a href="preview-keyset.html">Keyset</a></li>
						<li><a href="mobile.html">Mobile</a></li>
						<li><a href="jquery-mobile-1.4.html">Mobile v1.4</a></li>
						<li><a href="navigate.html">Navigate</a></li>
						<li><a href="scramble.html">Scramble</a></li>
						<li><a href="../index.html#typing">Typing</a></li>
					</ul>
				</li>
				<li><a href="//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="//github.com/Mottie/Keyboard"><span class="fa fa-github fa-lg" title="GitHub"></span></a></li>
				<li><a href="//github.com/Mottie/Keyboard/archive/master.zip"><span class="fa fa-download fa-lg" title="Download"></span></a></li>
				<li><a href="//github.com/Mottie/Keyboard/wiki"><span class="fa fa-file-text-o fa-lg" title="Documentation"></span></a></li>
				<li><a href="//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="//github.com/Mottie/Keyboard">Virtual Keyboard Greywyvern Language Layouts</a></h1>
	<h3>"keyboard-layouts-greywyvern.js"</h3>
	<h4>This is a work in progress.</h4>

	<div class="block2">
		<div class="row">
			<div class="col-xs-4"></div>
  		<div class="col-xs-4">
				<select class="form-control" id="lang"></select>
				<div style="height: 50px;"></div>
			</div>
		</div>

		<h2></h2>
		<input id="multi" type="text" />
	</div>

	<br class="clear" />

	<div id="footer2">
		<div>
			All layouts in this file have been generated & modified from the<br>
			<a href="//www.greywyvern.com/code/javascript/keyboard">Javascript Graphical / Virtual Keyboard Interface</a><br>
			Copyright (c) 2014 - GreyWyvern<br>
			Licenced for free distribution under the BSDL
		</div>
	</div>

</div>

</body>
</html>