<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard Mobile Demo</title>
<!-- demo -->
<link href="css/demo.css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.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>
<style>
html head + body .ui-btn.ui-btn-c:hover,
html head + body .ui-btn.ui-btn-c.ui-btn-hover,
html head + body .ui-btn.ui-btn-c:active,
html head + body .ui-btn.ui-btn-c.ui-btn-active {
background-color: #f7931e;
border-color: #a37a00;
color: #fff;
text-shadow: 0 1px 0 #ffcc33;
}
</style>
<!-- initialize keyboard (required) -->
<script>
$(document).on('pagecreate', function(){
var $k = $('#keyboard'),
$s = $('#switcher').find('input'),
set = $('#switcher').find('.ui-controlgroup-controls');
$k
.keyboard({
keyBinding : 'mousedown touchstart',
stayOpen : true
})
/* initial setup for mobile extension */
.addMobile({
// keyboard wrapper theme
container : { theme:'b' },
// theme added to all regular buttons
buttonMarkup : { theme:'b', shadow:'true', corners:'true' },
// theme added to all buttons when they are being hovered
buttonHover : { theme:'b' },
// theme added to action buttons (e.g. tab, shift, accept, cancel);
// parameters here will override the settings in the buttonMarkup
buttonAction : { theme:'c' },
// theme added to button when it is active (e.g. shift is down)
// All extra parameters will be ignored
buttonActive : { theme:'c' }
});
/* Theme switcher - temporary until jQuery Mobile Theme Switcher is available */
$s.bind('change', function(){
$k.data('keyboard').close();
$k.addMobile({
container : { theme : set.eq(0).find(':checked')[0].id.slice(-1) },
buttonMarkup : { theme : set.eq(1).find(':checked')[0].id.slice(-1), shadow:'true', corners:'true' },
buttonHover : { theme : set.eq(2).find(':checked')[0].id.slice(-1) },
buttonAction : { theme : set.eq(3).find(':checked')[0].id.slice(-1) },
buttonActive : { theme : set.eq(4).find(':checked')[0].id.slice(-1) }
});
$k.data('keyboard').reveal();
});
});
</script>
</head>
<body id="mobile">
<div id="pagewrap" data-role="page" data-theme="b">
<!-- 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="layouts2.html">Layouts2</a>
<a data-ajax="false" href="layouts3.html">Layouts3</a>
<a data-ajax="false" href="scramble.html">Scramble</a>
<a data-ajax="false" href="navigate.html">Navigate</a>
<a data-ajax="false" href="preview-keyset.html">Keyset</a>
<a data-ajax="false" href="extender.html">Extender</a>
<a data-ajax="false" href="calculator.html">Calculator</a>
</div>
<!-- End Links -->
<h1><a data-ajax="false" href="https://github.com/Mottie/Keyboard">Virtual Keyboard jQuery Mobile Themes</a></h1>
<div id="switcher">
<div class="swatch" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Container<br>(background)</legend>
<input type="radio" id="radio-ca" name="radio-c" class="custom"><label for="radio-ca">A</label>
<input type="radio" id="radio-cb" name="radio-c" class="custom" checked><label for="radio-cb">B</label>
</fieldset>
</div>
<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"><label for="radio-ra">A</label>
<input type="radio" id="radio-rb" name="radio-r" class="custom" checked><label for="radio-rb">B</label>
</fieldset>
</div>
<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"><label for="radio-ha">A</label>
<input type="radio" id="radio-hb" name="radio-h" class="custom" checked><label for="radio-hb">B</label>
<input type="radio" id="radio-hc" name="radio-h" class="custom"><label for="radio-hc">C</label>
</fieldset>
</div>
<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"><label for="radio-aa">A</label>
<input type="radio" id="radio-ab" name="radio-a" class="custom"><label for="radio-ab">B</label>
<input type="radio" id="radio-ac" name="radio-a" class="custom" checked><label for="radio-ac">C</label>
</fieldset>
</div>
<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"><label for="radio-va">A</label>
<input type="radio" id="radio-vb" name="radio-v" class="custom"><label for="radio-vb">B</label>
<input type="radio" id="radio-vc" name="radio-v" class="custom" checked><label for="radio-vc">C</label>
</fieldset>
</div>
</div>
<h4>Check out the <a data-ajax="false" href="jquery-mobile-1.4.html">jQuery Mobile v1.4 demo</a> that automatically adds a virtual numeric keypad to all numeric <code><input></code> elements</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 -->
</div>
</body>
</html>
Jquery实现QWERTY软键盘插件.rar
版权申诉
6 浏览量
2023-01-27
10:06:43
上传
评论
收藏 601KB RAR 举报
Jquery实现QWERTY软键盘插件.rar （327个子文件） 
bootstrap.min.css 120KB jquery-ui.min.css 29KB keyboard.css 10KB keyboard.min.css 6KB demo.css 4KB tipsy.css 2KB calculator.css 1KB prettify.css 1KB keyboard-previewkeyset.css 1KB keyboard-previewkeyset.min.css 672B
mobile.html 6KB navigate.html 6KB layouts.html 6KB jquery-mobile-1.4.html 6KB scramble.html 3KB layouts2.html 3KB layouts3.html 3KB extender.html 2KB preview-keyset.html 2KB calculator.html 2KB basic.html 2KB jquery-ui.min.js 235KB keyboard-layouts-microsoft.js 227KB keyboard-layouts-microsoft.min.js 152KB keyboard-layouts-greywyvern.js 136KB keyboard-layouts-combined.js 120KB jquery.min.js 94KB keyboard-layouts-greywyvern.min.js 93KB jquery.keyboard.js 78KB keyboard-layouts-combined.min.js 57KB jquery.keyboard.extension-all.js 51KB jquery.keyboard.min.js 33KB jquery.keyboard.extension-all.min.js 21KB demo.js 14KB prettify.js 13KB jquery.keyboard.extension-typing.js 11KB calculator.js 10KB ms-Greek.js 10KB arabic.js 9KB jquery.mousewheel.js 8KB jquery.keyboard.extension-navigation.js 8KB ms-Japanese Hiragana.js 7KB jquery-migrate-1.2.1.min.js 7KB serbian.js 7KB ms-Greek.min.js 7KB jquery.keyboard.extension-scramble.js 7KB jquery.keyboard.extension-mobile.js 7KB vietnamese.js 6KB french.js 5KB japanese.js 5KB ms-Latvian.js 5KB arabic.min.js 5KB russian.js 5KB bengali.js 5KB portuguese.js 5KB ms-Georgian.js 5KB albanian.js 5KB jquery.keyboard.extension-autocomplete.js 5KB jquery.tipsy.min.js 4KB turkish.js 4KB jquery.keyboard.extension-typing.min.js 4KB ms-Romanian.js 4KB tamil.js 4KB ms-Japanese Hiragana.min.js 4KB hungarianansi.js 4KB ms-Thai.js 4KB ms-Czech.js 4KB spanish.js 4KB _template.js 4KB hungarian.js 4KB ms-Ukrainian.js 4KB ms-Lithuanian.js 4KB ms-Canadian.js 4KB ms-Arabic.js 4KB persian.js 4KB serbian.min.js 4KB Gruntfile.js 4KB jquery.keyboard.extension-navigation.min.js 4KB german.js 4KB swedish.js 4KB ms-Devanagari.js 4KB romanian.js 3KB ms-Sorbian.js 3KB ms-Georgian.min.js 3KB jquery.jui_theme_switch.min.js 3KB ms-Gujarati.js 3KB ms-Kannada.js 3KB ms-Telugu.js 3KB ms-Punjabi.js 3KB ms-Sinhala.js 3KB ms-Hindi Traditional.js 3KB thai.js 3KB ms-Marathi.js 3KB ms-United Kingdom.js 3KB ms-Sami.js 3KB ms-Romanian.min.js 3KB belarusian.js 3KB hindi.js 3KB ms-Czech.min.js 3KB ms-Maltese.js 3KB共 327 条
- 1
- 2
- 3
- 4
资源评论
HappyGirl快乐女孩
- 粉丝: 1w+
- 资源: 4160
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
