easy

DocsVersion : 0.1.0

Slider 滑动条组件

Define in : slider.js

用于创建一个滑动条,设置滑动条的最小和最大值,可以横向和纵向滑动,不仅可以用鼠标拖动来进行滑动,同时也支持方向键,也支持直接的点击。

Slider( target, [ options ] )

依赖
JS : 依赖 Drag 组件
CSS : 依赖样式
HTML : 固定
参数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是选择器字符串、DOM 元素,也可以是 easyJS Object,仅对第一个匹配元素进行滑动条的绑定。

  • options
    Object
    可选

    多选形式的可配置参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 默认值 说明
axis String x

滑动条滑动的方向,x是横向,y是纵向。

max Number 100

滑动条的最大值,可以是负数,但必须大于最小值。

min Number 0

滑动条的最小值,可以是负数,但必须小于最大值。

value Number 0

初始化滑动条的默认值,可以是负数,但必须在最小值和最大值的范围内。

size String 200px

滑动条的宽度或高度,必须带有单位。

属性
  • value

    滑动条的当前值。

方法
  • destroy

    销毁滑动条实例。

  • on

    对滑动条实例绑定事件,该方法接受2个参数,第一个参数是事件类型,第二个参数是事件处理器,返回实例便于链式调用。

  • un

    卸载滑动条实例的事件。该方法接受1个事件类型的参数。返回实例便于链式调用。

  • setValue

    不拖动滑动条的情况下对滑动条设置值。该方法接受1个数值作为对滑动条进行设置的值。

下表列出了支持的事件类型。

事件类型 说明 事件对象
slide

滑动过程中持续触发的事件,类似于 mousemove 的触发机制。

event.target 滑动块元素。

slideend

滑动结束后触发的事件,类似于 mouseup 的触发机制。

event.target 滑动块元素。

slidestart

滑动开始时触发的事件,类似于 mousedown 的触发机制。

event.target 滑动块元素。

在使用 Slider 组件前,对其进行加载。

E.use( 'slider', function(){
    // 在回调中实例化拖拽
});

Slider 组件需要固定的 HTML 结构,其中 div.sd_complete 可省略。

<div class="eui_slider" id="slider">
    <div class="sd_complete"></div>
    <div class="sd_thumb"></div>
</div>

Slider 组件需要依赖样式。

.eui_slider{ background:#c6c6c6; position:relative; width:12px; height:12px; overflow:hidden; }
.eui_slider .sd_complete{ width:100%; height:100%; position:absolute; z-index:1; background:#2d89ef; }
.eui_slider:hover .sd_complete{ background:#439bfd; }
.eui_slider .sd_thumb{ width:12px; height:12px; position:absolute; z-index:2; overflow:hidden; background:#1a1a1a; cursor:pointer; outline:none; }
例子1

创建一个横向滑动条,设置其初始值为 50。

50

var slider = new E.ui.Slider( '#slider', {
    value : 50
});

var demoText = E( '#demoText1' );

slider.on( 'slide', function( e ){
    demoText.text( this.value );
});
例子2

创建一个纵向滑动条,设置其最大值为 100,最小值为 -100,初始值为 0。

0

var slider = new E.ui.Slider( '#slider', {
    value : 50
});

var demoText = E( '#demoText1' );

slider.on( 'slide', function( e ){
    demoText.text( this.value );
});