135 lines
5.6 KiB
HTML
135 lines
5.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>移动端友好的jQuery数字键盘插件|DEMO2_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
|
|||
|
|
<link href="http://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css" rel="stylesheet">
|
|||
|
|
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
|
|||
|
|
<link rel="stylesheet" href="css/jquery.numpad.css">
|
|||
|
|
<style type="text/css">
|
|||
|
|
.controlgroup-textinput{
|
|||
|
|
padding-top: .22em;
|
|||
|
|
padding-bottom: .22em;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<!--[if IE]>
|
|||
|
|
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<header class="htmleaf-header">
|
|||
|
|
<h1>移动端友好的jQuery数字键盘插件 <span>Touch-optimized numeric on-screen keypad for jQuery</span></h1>
|
|||
|
|
<div class="htmleaf-links">
|
|||
|
|
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
|
|||
|
|
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Form/201609174003.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="htmleaf-demo center">
|
|||
|
|
<a href="index.html">Bootstrap Demo</a>
|
|||
|
|
<a href="index2.html" class="current">jQuery Mobile Demo</a>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
|||
|
|
|
|||
|
|
<div data-role="header" class="jqm-header">
|
|||
|
|
<h2>Numeric keypad for jQuery mobile</h2>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center;padding: 1em 0">
|
|||
|
|
<a href="index.html">Bootstrap Demo</a>
|
|||
|
|
<a href="index2.html" class="current">jQuery Mobile Demo</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div role="main" class="ui-content jqm-content">
|
|||
|
|
<div class="ui-body ui-body-a ui-corner-all">
|
|||
|
|
<p>jQuery.NumPad is a touch optimized on-screen numeric keypad, which can be used within any web UIs based on jQuery. This page shows how the NumPad can be integrated with jQuery mobile. It is even compatible with ThemeRoller!</p>
|
|||
|
|
</div>
|
|||
|
|
<h2>Numeric keypads for input fields</h2>
|
|||
|
|
<div data-demo-html="true">
|
|||
|
|
<label for="text-basic">Simple input (click to toggle numpad)</label>
|
|||
|
|
<input type="text" name="text-basic" id="text-basic" value="1">
|
|||
|
|
</div><!-- /demo-html -->
|
|||
|
|
|
|||
|
|
<div data-demo-html="true">
|
|||
|
|
<label for="password">Password input for PIN codes (click to toggle numpad - note, that sensitive data is hidden at all times!)</label>
|
|||
|
|
<input type="password" name="password" id="password" value="">
|
|||
|
|
</div><!-- /demo-html -->
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label for="numpadButton">Input with extra numpad button (the input is directly editable, while the button shows the NumPad). Additionally this one has a maxlength="4" and an onChange event handler.</label>
|
|||
|
|
<div data-role="controlgroup" data-type="horizontal">
|
|||
|
|
<input type="text" id="numpadButton" data-wrapper-class="controlgroup-textinput ui-btn" value="2" maxlength="4" onchange="alert('Value changed to ' + $(this).val());">
|
|||
|
|
<button id="numpadButton-btn" class="ui-btn ui-icon-grid ui-btn-icon-notext ui-alt-icon ui-nodisc-icon"> </button>
|
|||
|
|
</div>
|
|||
|
|
</div><!-- /demo-html -->
|
|||
|
|
<h2>Numeric keypad for a div element</h2>
|
|||
|
|
<div data-demo-html="true">
|
|||
|
|
<div id="numpad4div">3</div>
|
|||
|
|
</div><!-- /demo-html -->
|
|||
|
|
<h2>Numeric keypad for table column</h2>
|
|||
|
|
<p>Click on a cell of the quantity column to get a numeric keypad for editing the quantity.</p>
|
|||
|
|
<div data-demo-html="true">
|
|||
|
|
<table id="numpad4column" data-role="table" class="ui-responsive">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>Product</th>
|
|||
|
|
<th>Price</th>
|
|||
|
|
<th>Quantity</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>XXL Keyboard</td>
|
|||
|
|
<td>29,95</td>
|
|||
|
|
<td class="qtyInput">1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>XXL Mouse</td>
|
|||
|
|
<td>19,95</td>
|
|||
|
|
<td class="qtyInput">1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>DVD-RW</td>
|
|||
|
|
<td>1,95</td>
|
|||
|
|
<td class="qtyInput">20</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div><!-- /demo-html -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div><!-- /page -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
|
|||
|
|
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
|
|||
|
|
<script src="http://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
|
|||
|
|
<script src="js/jquery.numpad.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
// Set NumPad defaults for jQuery mobile.
|
|||
|
|
// These defaults will be applied to all NumPads within this document!
|
|||
|
|
$.fn.numpad.defaults.gridTpl = '<table class="ui-bar-a"></table>';
|
|||
|
|
$.fn.numpad.defaults.backgroundTpl = '<div class="ui-popup-screen ui-overlay-a"></div>';
|
|||
|
|
$.fn.numpad.defaults.displayTpl = '<input data-theme="b" type="text" />';
|
|||
|
|
$.fn.numpad.defaults.buttonNumberTpl = '<a data-role="button" data-theme="b"></a>';
|
|||
|
|
$.fn.numpad.defaults.buttonFunctionTpl = '<a data-role="button" data-theme="a"></a>';
|
|||
|
|
$.fn.numpad.defaults.onKeypadCreate = function(){$(this).enhanceWithin();};
|
|||
|
|
|
|||
|
|
// Instantiate NumPad once the page is ready to be shown
|
|||
|
|
$(document).on('pageshow', function(){
|
|||
|
|
$('#text-basic').numpad();
|
|||
|
|
$('#password').numpad({
|
|||
|
|
displayTpl: '<input data-theme="b" type="password" />',
|
|||
|
|
hidePlusMinusButton: true,
|
|||
|
|
hideDecimalButton: true
|
|||
|
|
});
|
|||
|
|
$('#numpadButton-btn').numpad({
|
|||
|
|
target: $('#numpadButton'),
|
|||
|
|
});
|
|||
|
|
$('#numpad4div').numpad();
|
|||
|
|
$('#numpad4column .qtyInput').numpad();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|