),然后用构造函数初始化。
CSS样式
ui-progressbar:进度条容器的样式
ui-progressbar-value:进度条的样式
方法
进度条组件也有destroy、disable、enable、option方法
$(selector).progressbar([{value:number}]); //构造函数
$(selector).progressbar("value"[,value]); //获取/设置进度条的值
事件
change事件:类型:当进度条值发生变化时触发
事件绑定:
$(selector).progressbar({
change:function(event,ui){
event:事件对象
ui:进度条对象
}
});
Slider滑块组件
CSS样式表文件:jquery-ui.css
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.slider.js
在页面创建相应的HTML元素(如
),再用构造方法包装该元素
CSS样式
ui-slider-horizontal:滑块轨道
ui-slider-handle:滑块手柄
ui-slider-range:滑块范围
属性
属性 数据类型 默认值 说明 animate Boolean
String
Number false 是否添加动画效果,可接受"slow"、
"normal"、"fast"或毫秒数 max Number 100 设置滑块的最大值 min Number 0 设置滑块的最小值 orientation String "horizontal" 设置滑块的方向,"horizontal"、
"vertical"分别表示横向和纵向 range Boolean
String false 是否存在两个拖动手柄, step Number 1 设置步长,必须能被范围大小整除 value Number 0 若只有一个手柄,则指定其值,
若有两个手柄,则指定第一个手柄的值 values Array null 用于指定多个手柄,若range为true
则values的长度应该为2
方法
滑块也有destroy、disable、enable、option方法
$(selector).slider("value"[,value]); //获取/设定单手柄滑块的值
$(selector).slider("values",index[,value]);
//获取/设定多手柄滑块的值
事件
start事件:类型:slidestart,当开始滑动时触发
slide事件:类型:slide,当拖动滑块时触发
change事件:类型:slidechange,当停止滑动或使用编程方法改变值时触发
stop事件:类型:slidestop,当停止滑动时触发
事件绑定:
$(selector).slider({
eventName:function(event,ui){
event:事件对象
ui:封装了属性的对象,有以下属性:
value:获取当前手柄的值(单手柄)
value[0]:获取当前手柄的值(多手柄)
}
});