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

188 lines (165 sloc) 7.807 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.7/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.min.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>
// Change display language, if the definitions are available
if (typeof(language) === 'undefined') { var language = {}; };
var showKb = function(name, lang){
if (language.hasOwnProperty(lang)){
$.extend(true, $.keyboard.defaultOptions, language[lang]);
} else {
$.extend(true, $.keyboard.defaultOptions, language.basic);
}
$('#multi').keyboard({
layout: name,
usePreview: false,
alwaysOpen: true
})
.addTyping();
};
// Renaming some of the default keyboard key names (including symbols)
// *Note* this will effect ALL layouts on this page - but will be overridden by specific layout languages
language.basic = {
display : {
'a' : '\u2714:Accept (Shift-Enter)', // check mark - same action as accept
'accept' : '\u2714 Accept:Accept (Shift-Enter)', // check mark
'alt' : 'AltGr:Alternate Graphemes',
'b' : '\u2190:Backspace', // Left arrow (same as &larr;)
'bksp' : ($.browser.msie ? '\u2190 Bksp:Backspace' : '\u232b Bksp:Backspace'), // Arrow with X (not in IE) or Left arrow (same as &larr;)
'c' : '\u2716:Cancel (Esc)', // big X, close - same action as cancel
'cancel' : '\u2716 Cancel:Cancel (Esc)', // big X, close - same action as cancel
'clear' : 'C:Clear', // clear num pad
'combo' : '\u00f6:Toggle Combo Keys',
'dec' : '.:Decimal', // decimal point for num pad (optional), change '.' to ',' for European format
'e' : '\u21b5:Enter', // down, then left arrow - enter symbol
'enter' : '\u21b5 Enter:Enter', // down, then left arrow - enter symbol
'lock' : '\u21ea Lock:Caps Lock', // caps lock
's' : '\u21e7:Shift', // thick hollow up arrow
'shift' : '\u21e7 Shift:Shift', // thick hollow up arrow
'sign' : '\u00b1:Change Sign', // +/- sign for num pad
'space' : '&nbsp;:Space',
't' : '\u21e5:Tab', // right arrow to bar (used since this virtual keyboard works with one directional tabs)
'tab' : '\u21e5 Tab:Tab' // right arrow to bar (used since this virtual keyboard works with one directional tabs)
},
// Message added to the key title while hovering, if the mousewheel plugin exists
wheelMessage : 'Use mousewheel to see other keys'
};
$(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, file );
});
} else {
showKb( layout, file );
}
}).trigger('change');
});
</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</a>
<a href="mobile.html">Mobile</a>
<a class="current" href="layouts.html">Layouts</a>
<a href="navigate.html">Navigate</a>
<a href="calculator.html">Calculator</a>
<a class="play" href="http://jsfiddle.net/Mottie/CAQfp/">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><br><br>
</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="danish" class="danish-qwerty">Danish (qwerty)</option>
<option value="french" class="french-azerty-1">French (azerty-1)</option>
<option value="french" class="french-azerty-2">French (azerty-2)</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="hungarian" class="hungarian-qwertz-1">Magyar (qwertz-1) utf8</option>
<option value="hungarian" class="hungarian-qwertz-2">Magyar (qwertz-2) utf8</option>
<option value="hungarianansi" class="hungarianansi-qwertz-1">Magyar (qwertz-1) ansi</option>
<option value="hungarianansi" class="hungarianansi-qwertz-2">Magyar (qwertz-2) ansi</option>
<option value="russian" class="russian-qwerty">Russian (qwerty)</option>
<option value="swedish" class="swedish-qwerty">Swedish (qwerty)</option>
<option value="swedish" class="swedish-dvorak">Swedish (dvorak)</option>
<option value="turkish" class="turkish-q">Turkish (q)</option>
<option value="turkish" class="turkish-f">Turkish (f)</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.