Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

153 lines (131 sloc) 5.669 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard Language Layouts</title>
<!-- demo -->
<link href="demo/demo.css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.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>
<!-- preloaded keyboard layout -->
<script src="layouts/albanian.js" charset="utf-8"></script>
<!-- theme switcher -->
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script>
var showKb = function(name){
$('#multi').keyboard({
layout: name,
usePreview: false
})
.addTyping()
.getkeyboard().reveal();
};
$(document).ready(function() {
// Theme switcher
$('#switcher').themeswitcher();
$('#lang').change(function(){
var kb = $('#multi'),
opt = $(this).find('option:selected'),
layout = opt.attr('class'),
file = $(this).val();
$('h2').text(opt.text());
$('#multi')[file.match('arabic') ? 'addClass' : 'removeClass']('rtl');
if (!$('script[src*=' + file + ']').length) {
$.getScript('layouts/' + file + '.js', function() {
if (kb.data('keyboard')) { kb.getkeyboard().destroy(); }
showKb( layout );
});
} else {
showKb( layout );
}
}).trigger('change');
});
// Renaming some of the default keyboard key names (including symbols)
// *Note* this will effect ALL layouts on this page
$.extend(true, $.keyboard.defaultOptions.display, {
'accept' : '\u2714 Accept:Accept (Shift-Enter)', // check mark
'bksp' : ($.browser.msie ? '\u2190 Bksp:Backspace' : '\u232b Bksp:Backspace'), // Arrow with X (not in IE) or Left arrow (same as &larr;)
'cancel' : '\u2716 Cancel:Cancel (Esc)', // big X, close - same action as cancel
'enter' : '\u21b5 Enter:Enter', // down, then left arrow - enter symbol
'shift' : '\u21e7 Shift:Shift', // thick hollow up arrow
'sign' : '\u00b1:Change Sign', // +/- sign for num pad
'space' : ' :Space',
'tab' : '\u21e5 Tab:Tab' // right arrow to bar (used since this virtual keyboard works with one directional tabs)
});
</script>
<style>
/* making a few keys wider, to include the symbol - use .ui-keyboard-actionkey to affect all (including space) */
.ui-keyboard-accept, .ui-keyboard-cancel, .ui-keyboard-bksp, .ui-keyboard-enter, .ui-keyboard-shift {
font-size: .8em;
width: 5.2em;
height: 2em;
}
.rtl {
direction: rtl;
text-align: right;
}
</style>
</head>
<body>
<div id="page-wrap">
<!-- Links to other demo pages & docs -->
<div id="nav">
<a href="index.html">Main Demo</a>
<a href="basic.html">Basic Demo</a>
<a class="current" href="layouts.html">Language Demos</a>
<a href="calculator.html">Calculator Demo</a>
<a class="play" href="http://jsfiddle.net/Mottie/Qs2V2/">Playground</a>
<a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
<a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
<a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a>
</div>
<!-- End Links -->
<h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard Language Layouts</a></h1>
<h4>This is a work in progress.</h4>
<div id="switcher"></div>
<br>
<div class="block2">
<select id="lang">
<!-- value="file name", class="layout name", Title -->
<option value="albanian" class="albanian-qwerty">Albanian (qwerty)</option>
<option value="albanian" class="albanian-qwertz">Albanian (qwertz)</option>
<option value="arabic" class="arabic-azerty">Arabic (azerty)</option>
<option value="arabic" class="arabic-qwerty-1">Arabic (qwerty-1)</option>
<option value="arabic" class="arabic-qwerty-2">Arabic (qwerty-2)</option>
<option value="arabic" class="arabic-qwerty-3">Arabic (qwerty-3)</option>
<option value="arabic" class="arabic-qwerty-4">Arabic (qwerty-4)</option>
<option value="belarusian" class="belarusian-qwerty">Belarusian (Belarus)</option>
<option value="bengali" class="bengali-qwerty-1">Bengali (qwerty-1)</option>
<option value="bengali" class="bengali-qwerty-2">Bengali (qwerty-2)</option>
<option value="bulgarian" class="bulgarian-qwerty">Bulgarian (qwerty)</option>
<option value="catalan" class="catalan-qwerty">Catalan (qwerty)</option>
<option value="german" class="german-qwertz-1">German (qwertz-1)</option>
<option value="german" class="german-qwertz-2">German (qwertz-2)</option>
<option value="scandinavian" class="scandic-qwerty">Scandinavian (qwerty)</option>
<option value="scandinavian" class="scandic-dvorak">Scandinavian (dvorak)</option>
<!--
<option value="" class=""></option>
-->
</select>
<div style="height: 50px;"></div>
<h2></h2>
<input id="multi" type="text" />
</div>
<br class="clear" />
<div id="footer2">
<div>
If you find any errors, please submit an <a href="https://github.com/Mottie/Keyboard/issues">issue</a>.<br>
Or if you would like to contribute a layout, please email me at <a href="%6D%61%69%6C%74%6F%3Aw%6Fwm%6Ftty%40g%6Dail%2Ec%6Fm">wowmotty a&#116; &#103;&#109;&#97;&#105;&#108; d&#111;t c&#111;m</a>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.