Spinner 數值調節器可以實現任意值的遞增，每次的遞增值主要是通過increment="遞增值"屬性來控制的。
屬性
該屬性擴展自驗證框（validatebox），下面是為微調器（spinner）添加的屬性。
| 名稱 | 類型 | 描述 | 默認值 |
|---|---|---|---|
| width | number | 該組件的寬度。 | auto |
| height | number | 該組件的高度。該屬性自版本 1.3.2 起可用。 | 22 |
| value | string | 初始值。 | |
| min | string | 允許的最小值。 | null |
| max | string | 允許的最大值。 | null |
| increment | number | 點擊微調器按鈕時的增量值。 | 1 |
| editable | boolean | 定義用戶是否可以往文本域中直接輸入值。 | true |
| disabled | boolean | 定義是否禁用文本域。 | false |
| spin | function(down) | 當用戶點擊微調按鈕時調用的函數。'down' 參數指示用戶是否點擊了向下微調按鈕。 |
-----------------------------------------------頁面樣式---------------------------------------------------------------
-----------------------------------------------具體的代碼實現---------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Spinner 數值調節器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/boot.js" type="text/javascript"></script>
</head>
<body>
<h1>Spinner 數值調節器</h1>
<input id="sp1" changeOnMousewheel="false" class="mini-spinner" minValue="200" maxValue="250" onvaluechanged="onValueChanged"/>
<br /><br />
<input type="button" value="setValue" onclick="setValue()"/>
<input type="button" value="getValue" onclick="getValue()"/>
<input type="button" value="disable" onclick="disable()"/>
<input type="button" value="enable" onclick="enable()"/>
<script type="text/javascript">
var count = 0;
function onValueChanged(e) {
count++;
document.title = count;
}
function setValue() {
var t = mini.get("sp1");
t.setValue("222");
}
function getValue() {
var t = mini.get("sp1");
alert(t.getValue());
}
function enable() {
var t = mini.get("sp1");
t.enable();
}
function disable() {
var t = mini.get("sp1");
t.disable();
}
</script>
<h1>小數點、千分位</h1>
<input id="sp2" class="mini-spinner" value="123456.123" minValue="-1000000" maxValue="1000000" format="n2" increment="0.1"/>
<br /><br />
<h1>貨幣</h1>
<input class="mini-spinner" value="123456.123" minValue="-1000000" maxValue="1000000" format="c4" increment="2"/>
<br /><br />
<h1>百分比</h1>
<input class="mini-spinner" increment="0.01" value="0.123" minValue="0" maxValue="1" format="p2"/>
<br /><br />
<h1>自定義</h1>
<input class="mini-spinner" value="123456.123" minValue="-1000000" maxValue="1000000" format="¥#,0.00"/>
<div class="description">
<h3>Description</h3>
<p>Spinner實現數字的輸入，format實現數字格式化：</p>
<ul>
<li>小數點和千分位：format="n"</li>
<li>貨幣格式：format="c"。</li>
<li>百分比格式：format="p"。</li>
<li>自定義格式：format="¥#,0.00"。</li>
</ul>
</div>
</body>
</html>