歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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

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

Copyright © Linux教程網 All Rights Reserved