easyUI Slider

http://blog.csdn.net/yanghongchang_/article/details/7823306

@author YHC

覆盖默认值 $.fn.slider.defaults.

 slider 允许用户从一个有效的范围选择一个数值.当沿着轨道移动拇指(鼠标指上去变拇指)控制,一个提示将显示代表当前值,用户可以自定义slider ,通过设置它 的属性.

 

相关依赖

• draggable

使用示例

当使用作为一个form字段,从<input>标记创建slider 

 

 

<input class="easyui-slider" value="12"  style="width:300px"
        data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />

从<div>标签创建slider 也是允许的,但是'value'属性是无效的.

 

 

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

使用编程的方式创建slider 

 

 

<div id="ss" style="height:200px"></div>

$('#ss').slider({
    mode: 'v',
    tipFormatter: function(value){
        return value + '%';
    }
});

 

属性

NameTypeDescriptionDefault

width	number	slider的宽度.	auto
height	number	slider的高度.	auto
mode	string	指定那种类型的slider , 可用值: 'h'(水平),'v'(垂直).	h
showTip	boolean	定义是否显示值信息提示.	false
disabled	boolean	定义是否禁用 slider.	false
value	number	默认值.	0
min	number	最小允许值.	0
max	number	最大允许值.	100
step	number	步长(类似for循环中的i++)增加或者减少的值.	1
rule	array	显示在slider旁边的标签 , '|' 仅仅显示一根线.	[]
tipFormatter	function	转换slider的值的函数.返回string类型值将显示作为提示.

Events

NameParametersDescription

onChange	newValue, oldValue	当字段值发生改变的时候触发.
onSlideStart	value	开始拖动slider的时候触发.
onSlideEnd	value	停止拖动slider的时候触发.

Methods

NameParameterDescription

options	none	返回 slider options对象.
destroy	none	销毁slider对象.
resize	param	设置slider大小.'param' 包含以下属性: width:新的slider宽度 height:新的slider高度
getValue	none	得到slider值.
setValue	value	设置slider值.
enable	none	启用 slider 组件.
disable	none	禁用 slider 组件.

    以上如果有错误信息,请指出,thanks!