Fetching contributors…
Cannot retrieve contributors at this time
191 lines (162 sloc) 8.82 KB
<!DOCTYPE html>
<meta charset="utf-8">
<title>Virtual Keyboard Mobile Demo</title>
<!-- demo -->
<link href="demo/demo.css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<link href="" rel="stylesheet">
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="" />
<script src=""></script>
<!-- <script src=""></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-mobile.js"></script>
<!-- initialize keyboard (required) -->
var k = $('#keyboard'),
s = $('#switcher').find('input'),
set = $('#switcher').find('.ui-controlgroup-controls'),
kbOptions = {
keyBinding : 'mousedown touchstart',
alwaysOpen : true,
// make sure jQuery UI styles aren't applied even if the stylesheet has loaded
// the Mobile UI theme will still over-ride the jQuery UI theme
css : {
input : '',
container : '',
buttonDefault : '',
buttonHover : '',
buttonActive : '',
buttonDisabled : ''
/* initial setup for mobile extension */
// keyboard wrapper theme
container : { theme:'a' },
// theme added to all regular buttons
buttonMarkup : { theme:'a', shadow:'true', corners:'true' },
// theme added to all buttons when they are being hovered
buttonHover : { theme:'c' },
// theme added to action buttons (e.g. tab, shift, accept, cancel);
// parameters here will override the settings in the buttonMarkup
buttonAction : { theme:'b' },
// theme added to button when it is active (e.g. shift is down)
// All extra parameters will be ignored
buttonActive : { theme:'e' }
/* Theme switcher - temporary until jQuery Mobile Theme Switcher is available */
s.bind('change', function(){
k.getkeyboard().destroy(); // destroy keyboard
.keyboard(kbOptions) // build a new one, ready for a new theme
container : { theme : set.eq(0).find(':checked').attr('data-theme') },
buttonMarkup : { theme : set.eq(1).find(':checked').attr('data-theme'), shadow:'true', corners:'true' },
buttonHover : { theme : set.eq(2).find(':checked').attr('data-theme') },
buttonAction : { theme : set.eq(3).find(':checked').attr('data-theme') },
buttonActive : { theme : set.eq(4).find(':checked').attr('data-theme') }
<body id="mobile">
<div id="pagewrap" data-role="page" data-theme="a">
<!-- Links to other demo pages & docs -->
<div id="nav">
<a data-ajax="false" href="index.html">Main Demo</a>
<a data-ajax="false" href="basic.html">Basic</a>
<a data-ajax="false" class="current" href="mobile.html">Mobile</a>
<a data-ajax="false" href="layouts.html">Layouts</a>
<a data-ajax="false" href="scramble.html">Scramble</a>
<a data-ajax="false" href="navigate.html">Navigate</a>
<a data-ajax="false" href="calculator.html">Calculator</a>
<a data-ajax="false" class="play" href="">Playground</a>
<a data-ajax="false" class="git" href="">Documentation</a>
<a data-ajax="false" class="git" href="">Download</a>
<a data-ajax="false" class="issue" href="">Issues</a><br><br>
<!-- End Links -->
<h1><a href="">Virtual Keyboard jQuery Mobile Themes</a></h1>
<h4>Until the jQurey Mobile Theme Roller is complete, use the color selections below to change the keyboard</h4>
<div id="wrap"> <!-- wrapper only needed to center the input -->
<!-- keyboard input -->
<label for="keyboard"></label>
<input id="keyboard" name="keyboard" type="text">
</div> <!-- End wrapper -->
<!-- Once jQuery Mobile Theme Roller is complete, add it here -->
<div id="switcher">
<div class="swatch" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" id="radio-ca" name="radio-c" class="custom" data-theme="a" checked><label for="radio-ca">A</label>
<input type="radio" id="radio-cb" name="radio-c" class="custom" data-theme="b"><label for="radio-cb">B</label>
<input type="radio" id="radio-cc" name="radio-c" class="custom" data-theme="c"><label for="radio-cc">C</label>
<input type="radio" id="radio-cd" name="radio-c" class="custom" data-theme="d"><label for="radio-cd">D</label>
<input type="radio" id="radio-ce" name="radio-c" class="custom" data-theme="e"><label for="radio-ce">E</label>
<div class="swatch" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Regular Buttons<br>(non-action)</legend>
<input type="radio" id="radio-ra" name="radio-r" class="custom" data-theme="a" checked><label for="radio-ra">A</label>
<input type="radio" id="radio-rb" name="radio-r" class="custom" data-theme="b"><label for="radio-rb">B</label>
<input type="radio" id="radio-rc" name="radio-r" class="custom" data-theme="c"><label for="radio-rc">C</label>
<input type="radio" id="radio-rd" name="radio-r" class="custom" data-theme="d"><label for="radio-rd">D</label>
<input type="radio" id="radio-re" name="radio-r" class="custom" data-theme="e"><label for="radio-re">E</label>
<div class="swatch" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Hovered Buttons<br>(all)</legend>
<input type="radio" id="radio-ha" name="radio-h" class="custom" data-theme="a"><label for="radio-ha">A</label>
<input type="radio" id="radio-hb" name="radio-h" class="custom" data-theme="b"><label for="radio-hb">B</label>
<input type="radio" id="radio-hc" name="radio-h" class="custom" data-theme="c" checked><label for="radio-hc">C</label>
<input type="radio" id="radio-hd" name="radio-h" class="custom" data-theme="d"><label for="radio-hd">D</label>
<input type="radio" id="radio-he" name="radio-h" class="custom" data-theme="e"><label for="radio-he">E</label>
<div class="swatch" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Action Buttons<br>(Enter)</legend>
<input type="radio" id="radio-aa" name="radio-a" class="custom" data-theme="a"><label for="radio-aa">A</label>
<input type="radio" id="radio-ab" name="radio-a" class="custom" data-theme="b" checked><label for="radio-ab">B</label>
<input type="radio" id="radio-ac" name="radio-a" class="custom" data-theme="c"><label for="radio-ac">C</label>
<input type="radio" id="radio-ad" name="radio-a" class="custom" data-theme="d"><label for="radio-ad">D</label>
<input type="radio" id="radio-ae" name="radio-a" class="custom" data-theme="e"><label for="radio-ae">E</label>
<div class="swatch" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Active Buttons<br>(Shift down)</legend>
<input type="radio" id="radio-va" name="radio-v" class="custom" data-theme="a"><label for="radio-va">A</label>
<input type="radio" id="radio-vb" name="radio-v" class="custom" data-theme="b"><label for="radio-vb">B</label>
<input type="radio" id="radio-vc" name="radio-v" class="custom" data-theme="c"><label for="radio-vc">C</label>
<input type="radio" id="radio-vd" name="radio-v" class="custom" data-theme="d"><label for="radio-vd">D</label>
<input type="radio" id="radio-ve" name="radio-v" class="custom" data-theme="e" checked><label for="radio-ve">E</label>
<div id="footer2">
<span class="attn">* Note *</span> The "Active Buttons" setting is limited in that if the swatch letter of the Regular buttons is greater than the swatch letter of the Active Buttons, the theme doesn't apply properly. For example, Regular button swatch B with Active Button swatch A won't work because of the way the css is set up.