easyUI Slider

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

@author YHC

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

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

 

相关依赖

• draggable

使用示例

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

 

 

[html]  view plain copy

 

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

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

 

 

[html]  view plain copy

 

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

使用编程的方式创建slider 

 

 

[html]  view plain copy

 

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

[javascript]  view plain copy

 

1. $('#ss').slider({    
2.     mode: 'v',    
3.     tipFormatter: function(value){    
4.         return value + '%';    
5.     }    
6. });   

 

属性

Name	Type	Description	Default
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

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

Methods

Name	Parameter	Description
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!