标签：mui dd 最小值 输入框 步长 numbox data1
本文主要介绍numbox(数字输入框)，最小值、最大值、步长、获取值、设置值、重定义功能
mui提供了数字输入框控件，可直接输入数字，也可以点击“+”、“-”按钮变换当前数值；默认numbox控件dom结构比较简单，如下：
1 <div class="mui-numbox"> 2 <!-- "-"按钮，点击可减小当前数值 --> 3 <button class="mui-btn mui-numbox-btn-minus" type="button">-</button> 4 <input class="mui-numbox-input" type="number" /> 5 <!-- "+"按钮，点击可增大当前数值 --> 6 <button class="mui-btn mui-numbox-btn-plus" type="button">+</button> 7 </div>
1、numbox属性，如下：
numbox方法，如下：
2、实例：
功能描述：
①默认 步长10，最小值100，最大值1000
②点击【获取当前值】按钮，当前值>500时，把numbox中的值设置为800，并弹出警告框
③当前值>200时，设置步长100，最小值1000，最大值2000，并弹出警告框
源码如下：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>数字输入框</title>
7 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
8 <meta name="apple-mobile-web-app-capable" content="yes">
9 <meta name="apple-mobile-web-app-status-bar-style" content="black">
10 <!--标准mui.css-->
11 <link rel="stylesheet" href="css/mui.min.css">
12 <!--App自定义的css-->
13 <link rel="stylesheet" type="text/css" href="css/app.css" />
14 <style>
15 /* html,
16 body, */
17 /* .mui-content {
18 height: 0px;
19 margin: 0px;
20 background-color: #efeff4;
21 }
22 h5.mui-content-padded {
23 margin-left: 0px !important;
24 margin-top: 20px !important;
25 }
26 .mui-card {
27 margin: 0px;
28 } */
29 </style>
30 </head>
31
32 <body>
33 <header class="mui-bar mui-bar-nav">
34 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
35 <h1 class="mui-title">numbox</h1>
36 </header>
37 <div class="mui-content">
38 <div class="mui-content-padded">
39
40 <!-- id要加在mui-numbox的开始，才能取到内部input的值 -->
41 <div id="data1" class="mui-numbox" data-numbox-step='10' data-numbox-min='100' data-numbox-max='1000' style="width: 180px;">
42 <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
43 <input class="mui-numbox-input" type="number" />
44 <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
45 </div>
46 <button type="button" class="mui-btn" id="btn1">获取当前值</button>
47 </div>
48 </div>
49
50 </body>
51 <script src="js/mui.min.js"></script>
52 <script>
53 mui.init();
54 document.getElementById("btn1").addEventListener('tap', function(event) {
55 var dd = mui('#data1').numbox().getValue();
56 if(dd>=500){
57 mui('#data1').numbox().setValue(800);
58 dd=mui('#data1').numbox().getValue();
59 }else if(dd>=200){
60 mui('#data1').numbox().setOption('step',100);//步长
61 mui('#data1').numbox().setOption('min',1000);//最小值
62 mui('#data1').numbox().setOption('max',2000);//最大值
63 dd=mui('#data1').numbox().getValue();
64 }
65 mui.alert(''+dd, '当前值: ', "确定");
66 });
67 </script>
68 </html>
标签：mui,dd,最小值,输入框,步长,numbox,data1 来源： https://www.cnblogs.com/lgx5/p/14696387.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。