jQuery UI應用–滑塊Slider

1、            Animate： 類型Boolean 預設值false

a)     用處：單擊滑動地區時，滑塊是否使用動畫效果平滑移動到單擊位置。

b)     程式碼範例：

建立執行個體時設定屬性值

$(".class").slider({animate:true});

執行個體化後得到屬性值

var animate = $("#id").slider("option","animate");

執行個體化後設定屬性值

$("#id").slider("option","animate",true);

 

2、            max ：類型Number 預設值100

a)     用處：滑動範圍最大值。

b)     程式碼範例:

建立執行個體時設定屬性值

$(".class").slider({max:false});

執行個體化後得到屬性值

var max = $("#id").slider("option","max");

執行個體化後設定屬性值

$("#id").slider("option","max",false);

 

3、            min :類型Number預設值
0

a)     用處：滑動範圍最小值。

b)     程式碼範例

建立執行個體時設定屬性值

$(".class").slider({min:false});

執行個體化後得到屬性值

var min = $("#id").slider("option","min");

執行個體化後設定屬性值

$("#id").slider("option","min",false);

 

4、            Orientation：類型 String預設值
"auto"

a)     用處：滑動方向。通常無需設定，控制項會自行探測正確方向。

b)     程式碼範例

建立執行個體時設定屬性值

$(".class").slider({orientation:"vertical"});

執行個體化後得到屬性值

var orientation = $("#id").slider("option","orientation");

執行個體化後設定屬性值

$("#id").slider("option","orientation","vertical");

 

5、            Range：類型 Boolean/String 預設值false

a)     用處：設定為 true 時，自動探測是否有兩個滑塊並高亮顯示兩個滑塊間範圍。設定為 "min" 時，高亮顯示最小值至滑區塊範圍；設定為 "max" 時，高亮顯示滑塊至最大值範圍。

b)     程式碼範例

建立執行個體時設定屬性值

$(".class").slider({range:"min"});

執行個體化後得到屬性值

var range = $("#id").slider("option","range");

執行個體化後設定屬性值

$("#id").slider("option","range","min");

 

6、            step ：類型Number 預設值1

a)     用處：設定滑塊最小行進值，需可以被最大範圍值減去最小範圍值的差整除。

b)     程式碼範例

建立執行個體時設定屬性值

$(".class").slider({step:10});

執行個體化後得到屬性值

var step = $("#id").slider("option","step");

執行個體化後設定屬性值

$("#id").slider("option","step",10);

 

7、            value ：類型Number 預設值0

a)     用處：設定第一個滑塊的預設值。

b)     程式碼範例

建立執行個體時設定屬性值

$(".class").slider({value:26});

執行個體化後得到屬性值

var value = $("#id").slider("option","value");

執行個體化後設定屬性值

$("#id").slider("option","value",26);

 

8、            Values：類型 Array 預設值null

a)     設定多個滑塊預設值。range 屬性為 true 時，此數值元素個數應為 2。

b)     程式碼範例

建立執行個體時設定屬性值

$(".class").slider({values:[10,20,50]});

執行個體化後得到屬性值

var values = $("#id").slider("option","values");

執行個體化後設定屬性值

$("#id").slider("option","values",[10,20,50]);

 

9、            Disabled：類型boolean預設值false

a)     用處：控制滑塊是否可滑動

b)     代碼執行個體

1.      $(“#slider”).slider({disabled:false});