1. 程式人生 > >表單(下)-EasyUI Spinner 微調器、EasyUI Numberspinner 數值微調器、EasyUI Timespinner 時間微調器、EasyUI Slider 滑塊

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

origin 範圍 val 描述 vertical seconds 最大值 net auto

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‘ 參數來重寫初始寬度。
代碼實例:
  1. $(‘#ss‘).spinner(‘resize‘); // resize with original width
  2. $(‘#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)的值。
代碼實例:
  1. $(‘#ss‘).numberspinner(‘setValue‘, 8234725); // set value
  2. var v = $(‘#ss‘).numberspinner(‘getValue‘); // get value
  3. 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)的值。
代碼實例:
  1. $(‘#ss‘).timespinner(‘setValue‘, ‘17:45‘); // set timespinner value
  2. var v = $(‘#ss‘).timespinner(‘getValue‘); // get timespinner value
  3. 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)組件。

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