jQuery EasyUI，NumberSpinner(數字微調)組件

?

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

?

本節課重點了解 EasyUI 中 NumberSpinner(數字微調)組件的使用方法，這個組件依賴于 Numberbox(數值輸入框)和 Spinner(微調)組件。

?

一．加載方式

class 加載方式

<input id="box" class="easyui-numberspinner">

numberspinner()將一個輸入框執行數字微調組件方法

JS 加載調用

$(function () {$('#box').numberspinner({value: 10,increment: 10,min: 10,max: 500,}); });

?

?

二．屬性列表

注意：數字微調組件，屬性，方法，事件繼承微調組件的屬性，和驗證框組件的屬性，關于驗證方面的參照驗證框屬性，關于微調的參照微調屬性

$(function () {$('#box').numberspinner({required: true, //繼承驗證框組件的，不能為空width: 200, //繼承微調組件的，寬度height: 30, //繼承微調組件的，高度value: 2, //繼承微調組件的，設置值min: 1, //繼承微調組件的，最小值max: 500, //繼承微調組件的，最大值increment: 1, //繼承微調組件的，增量spin: function (down) { //繼承微調組件的，點擊微調按鈕事件 alert(down);},}); });

?

?

三．事件列表

NumberSpinner(數字微調)組件繼承自 Spinner(微調)組件。

$(function () {$('#box').numberspinner({required: true, //繼承驗證框組件的，不能為空width: 200, //繼承微調組件的，寬度height: 30, //繼承微調組件的，高度value: 2, //繼承微調組件的，設置值min: 1, //繼承微調組件的，最小值max: 500, //繼承微調組件的，最大值increment: 1, //繼承微調組件的，增量onSpinUp: function () {alert('點擊了上微調按鈕');},onSpinDown: function () {alert('點擊了下微調按鈕');},}); });

?

?

四．方法列表

NumberSpinner(數字微調)組件繼承自 Spinner(微調)組件方法

如：取值賦值

$(function () {$('#box').numberspinner({required: true, //繼承驗證框組件的，不能為空width: 200, //繼承微調組件的，寬度height: 30, //繼承微調組件的，高度value: 2, //繼承微調組件的，設置值min: 1, //繼承微調組件的，最小值max: 500, //繼承微調組件的，最大值increment: 1, //繼承微調組件的，增量 });$('#box').numberspinner('setValue', 100);alert($('#box').numberspinner('getValue')); });

?

?

我們可以使用$.fn.numberspinner.defaults 重寫默認值對象。

?

總結

以上是生活随笔為你收集整理的第二百一十七节，jQuery EasyUI，NumberSpinner(数字微调)组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。