jQuery EasyUI 表單插件 - Slider 滑塊

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.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）組件。
jQuery EasyUI 插件 jQuery EasyUI 插件