歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> jQuery UI應用--滑塊Slider

jQuery UI應用--滑塊Slider

日期:2017/3/1 10:25:41   编辑:Linux編程

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

更多關於jQuery UI的詳細信息,或者下載地址請點這裡

Copyright © Linux教程網 All Rights Reserved