easyUI Slider

@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 + '%';  
    }  
}); 

属性
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!


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值