當前位置:
首頁 >
第二百一十七节,jQuery EasyUI,NumberSpinner(数字微调)组件
發布時間:2024/9/21
36
豆豆
生活随笔
收集整理的這篇文章主要介紹了
第二百一十七节,jQuery EasyUI,NumberSpinner(数字微调)组件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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(数字微调)组件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 深入浅出javascript(二)函数和
- 下一篇: Altium_Designer-PCB的