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）添加的屬性。

事件

方法

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

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）重寫的方法。

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）添加的屬性。

事件

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

方法

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

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 + ‘%‘;
    }
});

屬性

事件

方法

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