表單（下）-EasyUI Spinner 微調器、EasyUI Numberspinner 數值微調器、EasyUI Timespinner 時間微調器、EasyUI Slider 滑塊

EasyUI Spinner 微調器

擴展自 $.fn.validatebox.defaults。通過 $.fn.spinner.defaults 重寫默認的 defaults。

微調器（spinner）把可編輯的文本框和兩個小按鈕結合起來，允許用戶從某個范圍的值中進行選擇。與組合框（combobox）相似，微調器（spinner）允許用戶輸入一個值，但是它買i有下拉列表。微調器（spinner）是創建其他微調器組件（比如：數值微調器 numberspinner、時間微調器 timespinner，等等）的基礎組件。

依賴

• validatebox

用法

微調器（spinner）應該使用 javascript 進行創建。從標記創建是不允許的。

<input id="ss" value="2">

$('#ss').spinner({
    required:true,
    increment:10
});

屬性

該屬性擴展自驗證框（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' 參數指示用戶是否點擊了向下微調按鈕。

事件

名稱	參數	描述
onSpinUp	none	當用戶點擊向上微調按鈕時觸發。
onSpinDown	none	當用戶點擊向下微調按鈕時觸發。

方法

該方法擴展自驗證框（validatebox），下面是為微調器（spinner）添加的方法。

名稱	參數	描述
options	none	返回選項（options）對象。
destroy	none	銷毀微調器（spinner）組件。
resize	width	重置組件的寬度。通過傳遞 'width' 參數來重寫初始寬度。 代碼實例： $('#ss').spinner('resize'); // resize with original width $('#ss').spinner('resize', 200); // resize with new width
enable	none	啟用組件。
disable	none	禁用組件。
getValue	none	獲取組件的值。
setValue	value	設置組件的值。
clear	none	清除組件的值。
reset	none	重置組件的值。該方法自版本 1.3.2 起可用。

EasyUI Numberspinner 數值微調器

擴展自 $.fn.spinner.defaults 和 $.fn.numberbox.defaults。通過 $.fn.numberspinner.defaults 重寫默認的 defaults。

數值微調器（numberspinner）是基於微調器（spinner）和數字框（numberbox）創建的。它可以把輸入值轉換為不同類型（比如：數字 numeric、百分比 percentage、貨幣 currency，等等）。它允許用戶使用向上/向下微調按鈕滾動到一個期望值。

依賴

• spinner
• numberbox

用法

從標記創建數值微調器（numberspinner）。

<input id="ss" class="easyui-numberspinner" style="width:80px;"
    required="required" data-options="min:10,max:100,editable:false">

使用 javascript 創建數值微調器（numberspinner）。

<input id="ss" required="required" style="width:80px;">

$('#ss').numberspinner({
    min: 10,
    max: 100,
    editable: false
});

創建數值微調器（numberspinner），並把數字格式化為貨幣字符串。

<input class="easyui-numberspinner" value="1234567890" style="width:150px;"
    data-options="required:true,precision:2,groupSeparator:',',decimalSeparator:'.',prefix:'$'">

屬性

該屬性擴展自微調器（spinner）和數字框（numberbox）。

事件

該事件擴展自微調器（spinner）。

方法

該方法擴展自微調器（spinner），下面是為數值微調器（numberspinner）重寫的方法。

名稱	參數	描述
options	none	返回選項（options）對象。
setValue	value	設置數值微調器（numberspinner）的值。 代碼實例： $('#ss').numberspinner('setValue', 8234725); // set value var v = $('#ss').numberspinner('getValue'); // get value alert(v)

EasyUI Timespinner 時間微調器

擴展自 $.fn.spinner.defaults。通過 $.fn.timespinner.defaults 重寫默認的 defaults。

時間微調器（timespinner）是基於微調器（spinner）創建的。它與數值微調器（numberspinner）相似，但是它只顯示時間值。時間微調器（timespinner）允許用戶通過點擊組件右側的小微調按鈕來增加或減少時間。

依賴

• spinner

用法

從標記創建時間微調器（timespinner）。

<input id="ss" class="easyui-timespinner" style="width:80px;"
    required="required" data-options="min:'08:30',showSeconds:true">

使用 javascript 創建時間微調器（timespinner）。

<input id="ss" style="width:80px;">

$('#ss').timespinner({
    min: '08:30',
    required: true,
    showSeconds: true
});

屬性

該屬性擴展自微調器（spinner），下面是為時間微調器（timespinner）添加的屬性。

名稱	類型	描述	默認值
separator	string	時分秒之間的分隔符。	:
showSeconds	boolean	定義是否顯示秒的信息。	false
highlight	number	初始高亮的域，0 = 時，1 = 分，...	0

事件

該事件擴展自微調器（spinner）。

方法

該方法擴展自微調器（spinner），下面是為時間微調器（timespinner）重寫的方法。

名稱	參數	描述
options	none	返回選項（options）對象。
setValue	value	設置時間微調器（timespinner）的值。 代碼實例： $('#ss').timespinner('setValue', '17:45'); // set timespinner value var v = $('#ss').timespinner('getValue'); // get timespinner value alert(v);
getHours	none	獲取當前的時鍾的值。
getMinutes	none	獲取當前的分鍾的值。
getSeconds	none	獲取當前的秒鍾的值。

EasyUI Slider 滑塊

通過 $.fn.slider.defaults 重寫默認的 defaults。

滑塊（slider）允許用戶從一個有限的范圍內選擇一個數值。當沿着軌道移動滑塊控件時，將顯示一個表示當前值的提示框，用戶可通過設置它的屬性來自定義滑塊。

依賴

• draggable

用法

當作為一個表單域使用時，從 <input> 標記創建滑塊（slider）。

<input class="easyui-slider" value="12" style="width:300px"
    data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]">

從 <div> 創建滑塊（slider）也是允許的，但是 'value' 屬性是無效的。

<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>

變成創建滑塊（slider）。

<div id="ss" style="height:200px"></div>

$('#ss').slider({
    mode: 'v',
    tipFormatter: function(value){
        return value + '%';
    }
});

屬性

名稱	類型	描述	默認值
width	number	滑塊（slider）的寬度。	auto
height	number	滑塊（slider）的高度。	auto
mode	string	只是滑塊（slider）的類型。可能的值：'h'(horizontal)、'v'(vertical)。	h
reversed	boolean	當設置為 true 時，將會對調最小值和最大值的位置。該屬性自版本 1.3.2 起可用。	false
showTip	boolean	定義是否顯示值信息提示框。	false
disabled	boolean	定義是否禁用滑塊（slider）。	false
value	number	默認值。	0
min	number	允許的最小值。	0
max	number	允許的最大值。	100
step	number	增加或減少的值。	1
rule	array	在滑塊旁邊顯示標簽，'|' — 值顯示線。	[]
tipFormatter	function	格式化滑塊值的函數。返回作為提示框顯示的字符串值。

事件

名稱	參數	描述
onChange	newValue,oldValue	當文本域的值改變時觸發。
onSlideStart	value	當開始拖拽滑塊時觸發。
onSlideEnd	value	當停止拖拽滑塊時觸發。
onComplete	value	當滑塊的值被用戶改變時觸發，無論是通過拖拽滑塊改變還是通過點擊滑塊改變都會觸發。該事件自版本 1.3.4 起可用。

方法

名稱	參數	描述
options	none	返回滑塊（slider）選項（options）。
destroy	none	銷毀滑塊（slider）對象。
resize	param	設置滑塊尺寸。'param' 參數包含下列屬性： width：新的滑塊寬度 height：新的滑塊高度
getValue	none	獲取滑塊（slider）的值。
setValue	value	設置滑塊（slider）的值。
clear	none	清除滑塊（slider）的值。該方法自版本 1.3.5 起可用。
reset	none	重置滑塊（slider）的值。該方法自版本 1.3.5 起可用。
enable	none	啟用滑塊（slider）組件。
disable	none	禁用滑塊（slider）組件。