EasyUI-Slider（滑动条）

2015-07-20 19:27:58 暂无评论阳光倾城网络前端 1,425

使用$.fn.slider.defaults重写默认值对象。

滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。

依赖关系

使用案例

当使用一个表单字段时，使用<input>标签创建一个滑动条。

也允许使用<div/>创建滚动条，但是‘value’属性是无效的。

<div class=“easyui-slider” data-options=“min:10,max:90,step:10” style=“width:300px”></div>

Create slider programatically.

属性

属性名	属性类型	描述	默认值
width	number	滑动条宽度。	auto
height	number	滑动条高度。	auto
mode	string	声明滚动条类型。可用值有：‘h'(水平)、‘v'(垂直)。	h
reversed	boolean	设置为true时，最小值和最大值将对调他们的位置。（该属性自1.3.2版开始可用）	false
showTip	boolean	定义是否显示值信息提示。	false
disabled	boolean	定义是否禁用滑动条。	false
value	number	默认值。	0
min	number	允许的最小值。	0
max	number	允许的最大值。	100
step	number	值增加或减少。	1
rule	array	显示标签旁边的滑块，‘\|’ — 只显示一行。	[]
tipFormatter	function	该函数用于格式化滑动条。返回的字符串值将显示提示。
converter	function	该转换器函数允许用户决定如何将一个值转换为进度条位置或进度条位置值。（该属性自1.3.6版开始可用）代码示例： $(‘#ss’).slider({ converter:{ toPosition:function(value, size){ var opts = $(this).slider(‘options’); return (value-opts.min)/(opts.max-opts.min)size; }, toValue:function(pos, size){ var opts = $(this).slider(‘options’); return opts.min + (opts.max-opts.min)(pos/size); } } });

事件

事件名	事件参数	描述
onChange	newValue, oldValue	在字段值更改的时候触发。
onSlideStart	value	在开始拖拽滑动条的时候触发。
onSlideEnd	value	在结束拖拽滑动条的时候触发。
onComplete	value	在滑块值被用户改变的时候触发，无论是拖动还是点击滑块。（该事件自1.3.4版开始可用）

方法

方法名	方法参数	描述
options	none	返回滑动条属性。
destroy	none	销毁滑动条对象。
resize	param	设置滑动条大小。‘param’参数包含一下属性： width：新滑动条宽度。 height：新滑动条高度。
getValue	none	获取滑动条的值。
setValue	value	设置滑动条的值。
clear	none	清除滑动条的值。（该方法自1.3.5版开始可用）
reset	none	重置滑动条的值。（该方法自1.3.5版开始可用）
enable	none	启用滑动条控件。
disable	none	禁用滑动条控件。