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