Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 195 lines (173 sloc) 8.398 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195
<!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.8/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 (kb.data('keyboard')) { kb.getkeyboard().destroy(); }
if (!language.hasOwnProperty(file)) {
$.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/MK947/">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="hebrew" class="hebrew-qwerty">Hebrew (qwerty)</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="japanese" class="japanese-kana">Japanese (kana)</option>
<option value="japanese" class="japanese-qwerty">Japanese (qwerty)</option>
<option value="latvian" class="latvian-qwerty">Latvian (qwerty)</option>
<option value="polish" class="polish-qwerty">Polish (qwerty)</option>
<option value="russian" class="russian-qwerty">Russian (qwerty)</option>
<option value="spanish" class="spanish-qwerty">Spanish (qwerty)</option>
<option value="spanish" class="spanish-qwerty-sp">Spanish (qwerty) special</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>
Something went wrong with that request. Please try again.