Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

177 lines (148 sloc) 7.81 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', inline:'true', corners:'false' },
// 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', inline:'true', corners:'false' },
buttonAction : { theme : set.eq(2).find(':checked').attr('data-theme') },
buttonActive : { theme : set.eq(3).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="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>
<!-- 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</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>Action Buttons</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</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="wrap"> <!-- wrapper only needed to center the input -->
<!-- keyboard input -->
<label for="keyboard"></label>
<input id="keyboard" name="keyboard" type="text">
</div> <!-- End wrapper -->
<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.
Jump to Line
Something went wrong with that request. Please try again.