140 lines
5.8 KiB
HTML
140 lines
5.8 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数字键盘插件|DEMO1_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
|
||
|
|
<!-- Bootstrap -->
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
|
||
|
|
<link rel="stylesheet" href="css/jquery.numpad.css">
|
||
|
|
<style type="text/css">
|
||
|
|
.nmpd-grid {border: none; padding: 20px;}
|
||
|
|
.nmpd-grid>tbody>tr>td {border: none;}
|
||
|
|
|
||
|
|
/* Some custom styling for Bootstrap */
|
||
|
|
.qtyInput {display: block;
|
||
|
|
width: 100%;
|
||
|
|
padding: 6px 12px;
|
||
|
|
color: #555;
|
||
|
|
background-color: white;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||
|
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||
|
|
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
|
||
|
|
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
|
||
|
|
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<!--[if IE]>
|
||
|
|
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="htmleaf-container">
|
||
|
|
<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" class="current">Bootstrap Demo</a>
|
||
|
|
<a href="index2.html">jQuery Mobile Demo</a>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<h1>jQuery.NumPad demo for Boostrap</h1>
|
||
|
|
<div class="well well-lg">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 bootstrap. It is fully compatible with bootstrap themes! See the full <a href="http://a.kabachnik.info/jquery-numpad.html">docs</a> for more information.</div>
|
||
|
|
<h2>Simple forms</h2>
|
||
|
|
<form>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="text-basic">Simple numeric input</label>
|
||
|
|
<input type="number" class="form-control" id="text-basic" placeholder="Enter a number">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="password">Pin code</label>
|
||
|
|
<input type="password" class="form-control" id="password" placeholder="Pin code">
|
||
|
|
</div>
|
||
|
|
<label for="numpadButton">Separate numpad button + maxlength=4 + input validation</label>
|
||
|
|
<div class="input-group">
|
||
|
|
<input type="text" id="numpadButton" class="form-control" placeholder="Enter a number" aria-describedby="numpadButton-btn" maxlength="4" onchange="alert('Value changed to ' + $(this).val());">
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<button class="btn btn-default" id="numpadButton-btn" type="button"><i class="glyphicon glyphicon-th"></i></button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<h2>Table</h2>
|
||
|
|
<p>Click on a row to open the numpad for the editable cell programmatically</p>
|
||
|
|
<table id="numpad4column" class="table">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.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="table modal-content"></table>';
|
||
|
|
$.fn.numpad.defaults.backgroundTpl = '<div class="modal-backdrop in"></div>';
|
||
|
|
$.fn.numpad.defaults.displayTpl = '<input type="text" class="form-control" />';
|
||
|
|
$.fn.numpad.defaults.buttonNumberTpl = '<button type="button" class="btn btn-default"></button>';
|
||
|
|
$.fn.numpad.defaults.buttonFunctionTpl = '<button type="button" class="btn" style="width: 100%;"></button>';
|
||
|
|
$.fn.numpad.defaults.onKeypadCreate = function(){$(this).find('.done').addClass('btn-primary');};
|
||
|
|
|
||
|
|
// Instantiate NumPad once the page is ready to be shown
|
||
|
|
$(document).ready(function(){
|
||
|
|
$('#text-basic').numpad();
|
||
|
|
$('#password').numpad({
|
||
|
|
displayTpl: '<input class="form-control" type="password" />',
|
||
|
|
hidePlusMinusButton: true,
|
||
|
|
hideDecimalButton: true
|
||
|
|
});
|
||
|
|
$('#numpadButton-btn').numpad({
|
||
|
|
target: $('#numpadButton')
|
||
|
|
});
|
||
|
|
$('#numpad4div').numpad();
|
||
|
|
$('#numpad4column .qtyInput').numpad();
|
||
|
|
|
||
|
|
$('#numpad4column tr').on('click', function(e){
|
||
|
|
$(this).find('.qtyInput').numpad('open');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|