jQuery UI应用--滑块Slider

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的详细信息，或者下载地址请点这里