MUI-numbox(數字輸入框)，最小值、最大值、步長、獲取值、設定值、重定義
阿新 • • 發佈：2018-12-28
本文主要介紹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方法，如下：
| 方法名 | 作用 |
|---|---|
|
|
獲取當前值 |
|
|
動態設定新值 |
|
|
更新選項,可取值:
|
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>