网博开发者社区

 找回密码
 立即注册
搜索
查看: 118|回复: 0

jQuery EasyUI 入门(31)

[复制链接]

57

主题

65

帖子

246

积分

老师

积分
246
发表于 2018-8-2 08:49:51 | 显示全部楼层 |阅读模式
本帖最后由 tyh_Fantasy 于 2018-8-17 07:47 编辑

Slider(滑动条)使用$.fn.slider.defaults重写默认值对象。
滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。

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


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

        <input class="easyui-slider" value="12"  style="width:300px"                        data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" /> 也允许使用<div/>创建滚动条,但是'value'属性是无效的。


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

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


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

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

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

        $('#ss').slider({                mode: 'v',                tipFormatter: function(value){                        return value + '%';                }        });
属性
属性名属性类型描述默认值
widthnumber滑动条宽度。auto
heightnumber滑动条高度。auto
modestring声明滚动条类型。可用值有:'h'(水平)、'v'(垂直)。h
reversedboolean设置为true时,最小值和最大值将对调他们的位置。(该属性自1.3.2版开始可用)false
showTipboolean定义是否显示值信息提示。false
disabledboolean定义是否禁用滑动条。false
valuenumber默认值。0
minnumber允许的最小值。0
maxnumber允许的最大值。100
stepnumber值增加或减少。1
rulearray显示标签旁边的滑块,'|' — 只显示一行。[]
tipFormatterfunction该函数用于格式化滑动条。返回的字符串值将显示提示。
事件
事件名事件参数描述
onChangenewValue, oldValue在字段值更改的时候触发。
onSlideStartvalue在开始拖拽滑动条的时候触发。
onSlideEndvalue在结束拖拽滑动条的时候触发。
方法
方法名方法参数描述
optionsnone返回滑动条属性。
destroynone销毁滑动条对象。
resizeparam设置滑动条大小。'param'参数包含一下属性:
width:新滑动条宽度。
height:新滑动条高度。
getValuenone获取滑动条的值。
setValuevalue设置滑动条的值。
enablenone启用滑动条控件。
disablenone禁用滑动条控件。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|网博开发者社区 ( 苏ICP备05021715号-1 )

GMT+8, 2018-10-19 04:26 , Processed in 0.083129 second(s), 26 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表