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});

?

?

?

?

轉載于:https://www.cnblogs.com/springside4/archive/2012/03/27/2481064.html

總結

以上是生活随笔為你收集整理的jQuery UI应用--滑块Slider的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。