/
mobile.html
177 lines (148 loc) · 7.81 KB
/
mobile.html
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
<!DOCTYPE html>
<html>
<head>
<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="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>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://jquerymobile.com/demos/1.0rc1/experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.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>
<script src="js/jquery.keyboard.extension-autocomplete.js"></script>
-->
<script src="js/jquery.keyboard.extension-mobile.js"></script>
<!-- initialize keyboard (required) -->
<script>
$(function(){
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 : ''
}
};
k
.keyboard(kbOptions)
/* initial setup for mobile extension */
.addMobile({
// 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
k
.keyboard(kbOptions) // build a new one, ready for a new theme
.addMobile({
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') }
});
});
});
</script>
</head>
<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="http://jsfiddle.net/Mottie/CAQfp/">Playground</a>
<a data-ajax="false" class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
<a data-ajax="false" class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
<a data-ajax="false" 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 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">
<legend>Container</legend>
<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>
</fieldset>
</div>
<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>
</fieldset>
</div>
<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>
</fieldset>
</div>
<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>
</fieldset>
</div>
</div>
<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">
<div>
<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.
</div>
</div>
</div>
</body>
</html>