123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>数字输入框</title>
- <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <!--标准mui.css-->
- <link rel="stylesheet" href="../css/mui.min.css">
- <!--App自定义的css-->
- <link rel="stylesheet" type="text/css" href="../css/app.css" />
- <style>
- html,
- body,
- .mui-content {
- height: 0px;
- margin: 0px;
- background-color: #efeff4;
- }
- h5.mui-content-padded {
- margin-left: 0px !important;
- margin-top: 20px !important;
- }
- .mui-card {
- margin: 0px;
- }
- </style>
- </head>
- <body>
- <header class="mui-bar mui-bar-nav">
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
- <h1 class="mui-title">number box(数字输入框)</h1>
- </header>
- <div class="mui-content">
- <div class="mui-content-padded">
- <h5 class="mui-content-padded">默认</h5>
- <div class="mui-numbox">
- <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
- <input class="mui-input-numbox" type="number" />
- <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
- </div>
- <h5 class="mui-content-padded">限定最小值和最大值(1~9)</h5>
- <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
- <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
- <input id="test" class="mui-input-numbox" type="number" value="5" />
- <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
- </div>
- <h5 class="mui-content-padded">设定步长值(步长 10)</h5>
- <div class="mui-numbox" data-numbox-step='10' data-numbox-min='10' data-numbox-max='90'>
- <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
- <input class="mui-input-numbox" type="number" />
- <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
- </div>
- <h5 class="mui-content-padded">取值操作</h5>
- <div class="mui-numbox">
- <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
- <input id="box" class="mui-input-numbox" type="number" />
- <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
- </div>
- <button id="btn" class="mui-btn" style="padding: 7px 12px;">取当前值</button>
- <h5 class="mui-content-padded">在行内</h5> 购买数量:
- <div class="mui-numbox">
- <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
- <input class="mui-input-numbox" type="number" />
- <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
- </div>
- <h5 class="mui-content-padded">在表单中</h5>
- <div class="mui-card">
- <form class="mui-input-group">
- <div class="mui-input-row">
- <label>数字框一</label>
- <div class="mui-numbox">
- <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
- <input class="mui-input-numbox" type="number" />
- <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
- </div>
- </div>
- <div class="mui-input-row">
- <label>数字框二</label>
- <div class="mui-numbox">
- <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
- <input class="mui-input-numbox" type="number" />
- <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
- </div>
- </div>
- </form>
- </div>
- <h5 class="mui-content-padded">通过样式定义大小(220x60)</h5>
- <div class="mui-numbox" style="width: 220px;height: 60px;">
- <button class="mui-btn-numbox-minus" type="button">-</button>
- <input class="mui-input-numbox" type="number" />
- <button class="mui-btn-numbox-plus" type="button">+</button>
- </div>
- <br/>
- <br />
- </div>
- </div>
- <script src="../js/mui.min.js"></script>
- <script>
- mui.init();
- document.getElementById("btn").addEventListener('tap', function(event) {
- mui.alert('当前值: ' + document.getElementById("box").value, null, "提示");
- });
- var testBox=document.getElementById("test");
- testBox.addEventListener('change',function(){
- console.log(testBox.value);
- });
- </script>
- </body>
- </html>
|