EasyUI-Slider(滑动条)

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

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


 
 


  • draggable

 
 

使用案例

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

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


也允许使用

创建滚动条,但是‘value'属性是无效的。

  1.  class=-slider” data-options=“min:10,max:90,step:10” style=“width:300px”  


Create slider programatically.

  1.  id=“ss” style=“height:200px”  


  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

禁用滑动条控件。

声明: 除非转自他站(如有侵权,请联系处理)外,本文采用 BY-NC-SA 协议进行授权 | 智乐兔
转载请注明:转自《EasyUI-Slider(滑动条)
本文地址:https://www.zhiletu.com/archives-2532.html
关注公众号:智乐兔

赞赏

wechat pay微信赞赏alipay pay支付宝赞赏

上一篇
下一篇

相关文章

在线留言

你必须 登录后 才能留言!

在线客服
在线客服 X

售前: 点击这里给我发消息
售后: 点击这里给我发消息

智乐兔官微