jQuery EasyUI，NumberSpinner(數(shù)字微調(diào))組件

?

學(xué)習(xí)要點(diǎn)：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

?

本節(jié)課重點(diǎn)了解 EasyUI 中 NumberSpinner(數(shù)字微調(diào))組件的使用方法，這個(gè)組件依賴于 Numberbox(數(shù)值輸入框)和 Spinner(微調(diào))組件。

?

一．加載方式

class 加載方式

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

numberspinner()將一個(gè)輸入框執(zhí)行數(shù)字微調(diào)組件方法

JS 加載調(diào)用

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

?

?

二．屬性列表

注意：數(shù)字微調(diào)組件，屬性，方法，事件繼承微調(diào)組件的屬性，和驗(yàn)證框組件的屬性，關(guān)于驗(yàn)證方面的參照驗(yàn)證框?qū)傩?#xff0c;關(guān)于微調(diào)的參照微調(diào)屬性

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

?

?

三．事件列表

NumberSpinner(數(shù)字微調(diào))組件繼承自 Spinner(微調(diào))組件。

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

?

?

四．方法列表

NumberSpinner(數(shù)字微調(diào))組件繼承自 Spinner(微調(diào))組件方法

如：取值賦值

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

?

?

我們可以使用$.fn.numberspinner.defaults 重寫默認(rèn)值對(duì)象。

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。