【JQuery UI】微調按鈕外掛——spinner
阿新 • • 發佈:2019-02-03
微調按鈕外掛不僅能在文字框中直接輸入數值,還可以通過點選輸入框右側的上下按鈕修改輸入框的值,還支援鍵盤的上下方向鍵改變輸入值,呼叫格式如下:
$(selector).spinner({options});
$(selector).spinner({options});
selector引數為文字輸入框元素,可選項options引數為spinner()方法的配置物件,在該物件中,可以設定輸入的最大、最小值,獲取改變值和設定對應事件。
例子:將輸入文字框與微調外掛相繫結,並呼叫外掛的spinner()方法,動態改變<div>元素顯示的背景色。
<body> <div id="divtest"> <div class="title"> 選擇顏色值</div> <div class="content"> <span id="spnColor" class="input fl"> <input value=0 /> </span> <span id="spnPrev" class="prev fr"></span> </div> </div> <script type="text/javascript"> $(function () { //定義變數 var intR = 0, intG = 0, intB = 0, strColor; $("input").spinner({ //初始化外掛 max: 10, min: 0, //設定微調按鈕遞增/遞減事件 spin: function (event, ui) { if (ui.value == 8) spnPrev.style.backgroundColor = "red"; else spnPrev.style.backgroundColor = "green"; }, //設定微調按鈕值改變事件 change: function (event, ui) { var intTmp = $(this).spinner("value"); if (intTmp < 0) $(this).spinner("value", 0); if (intTmp > 10) $(this).spinner("value", 10); if (intTmp == 8) spnPrev.style.backgroundColor = "red"; else spnPrev.style.backgroundColor = "green"; } }); }); </script> </body>
說明:
1) spin: function (event, ui) {}是按微調按鈕觸發的事件。
2) change: function (event, ui) {}是直接在輸入框輸入數字或者微調按鈕增減數字後,再在框外點選空白(這一步很重要!)後立即觸發的事件。
3) 初始化max、min只對spin觸發的事件有用,對change事件無用,所以需要在change事件觸發函式中加:
if (intTmp < 0) $(this).spinner("value", 0);
if (intTmp > 10) $(this).spinner("value", 10);
4)event表示事件物件,ui表示觸發此事件的控制元件。可是在spin和change中確實完全不一樣的,仔細看看:
spin: function (event, ui) {
if (ui.value == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
}
和
強烈注意:在spin中是通過ui.value來獲取輸入框的值,但這在change中行不通!change: function (event, ui) { var intTmp = $(this).spinner("value"); if (ui.value < 0) $(this).spinner("value", 0); if (intTmp > 10) $(this).spinner("value", 10); if (intTmp == 8) spnPrev.style.backgroundColor = "red"; else spnPrev.style.backgroundColor = "green"; }
在change中是通過$(this).spinner('value')來獲取輸入框的值的,而且是通過$(this).spinner('value',0)來設定輸入框的值!這是為什麼呢?不知道,請高手幫我解答!