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的詳細信息,或者下載地址請點這裡