版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LzzMandy/article/details/85054475
本文主要介绍numbox(数字输入框)，最小值、最大值、步长、获取值、设置值、重定义功能
mui提供了数字输入框控件，可直接输入数字，也可以点击“+”、“-”按钮变换当前数值；默认numbox控件dom结构比较简单，如下：
<div class="mui-numbox">
<!-- "-"按钮，点击可减小当前数值 -->
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<!-- "+"按钮，点击可增大当前数值 -->
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>1、numbox属性，如下：
| 属性名 | 作用 |
|---|---|
| data-numbox-min | 输入框允许使用的最小值，默认无限制 |
| data-numbox-max | 输入框允许使用的最大值，默认无限制 |
| data-numbox-step | 每次点击“+”、“-”按钮变化的步长，默认步长为1 |
numbox方法，如下：
| 方法名 | 作用 |
|---|---|
|
|
获取当前值 |
|
|
动态设置新值 |
|
|
更新选项,可取值:
扫描二维码关注公众号，回复：
4681611 查看本文章
|
2、实例：
功能描述：
①默认 步长10，最小值100，最大值1000
②点击【获取当前值】按钮，当前值>500时，把numbox中的值设置为800，并弹出警告框
③当前值>200时，设置步长100，最小值1000，最大值2000，并弹出警告框
源码如下：
<!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">numbox</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<!-- id要加在mui-numbox的开始，才能取到内部input的值 -->
<div id="data1" class="mui-numbox" data-numbox-step='10' data-numbox-min='100' data-numbox-max='1000' style="width: 180px;">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
<button type="button" class="mui-btn" id="btn1">获取当前值</button>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script>
mui.init();
document.getElementById("btn1").addEventListener('tap', function(event) {
var dd = mui('#data1').numbox().getValue();
if(dd>=500){
mui('#data1').numbox().setValue(800);
dd=mui('#data1').numbox().getValue();
}else if(dd>=200){
mui('#data1').numbox().setOption('step',100);//步长
mui('#data1').numbox().setOption('min',1000);//最小值
mui('#data1').numbox().setOption('max',2000);//最大值
dd=mui('#data1').numbox().getValue();
}
mui.alert(''+dd, '当前值: ', "确定");
});
</script>
</html>