设为首页 加入收藏

TOP

jQuery UI应用--滑块Slider
2014-11-24 13:29:46 来源: 作者: 【 】 浏览:1
Tags:jQuery 应用 滑块 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});


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇Linux Debug Filesystem的使用 下一篇jQuery插件使用之 --- 滑块的应用..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

·Sphinx : 高性能SQL (2025-12-24 10:18:11)
·Pandas 性能优化 - (2025-12-24 10:18:08)
·MySQL 索引 - 菜鸟教 (2025-12-24 10:18:06)
·Shell 基本运算符 - (2025-12-24 09:52:56)
·Shell 函数 | 菜鸟教 (2025-12-24 09:52:54)