欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » JQuery EasyUI 1.3.6官方API文档中文版 » 正文

Slider(滑动条)

创建时间:2014年09月04日 09:40  阅读次数:(9982)
分享到:

Slider(滑动条)

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

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

 

依赖关系

  • draggable

 

使用案例

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

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

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

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

Create slider programatically.

  1. <div id="ss" style="height:200px"></div>  
  1. $('#ss').slider({   
  2.     mode: 'v',   
  3.     tipFormatter: function(value){   
  4.         return value + '%';   
  5.     }   
  6. });  

 

属性

属性名 属性类型 描述 默认值
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 禁用滑动条控件。
^GWb閪厤菑8
来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 15+69=? 的结果(结果是:84)
结  果: