slider - 滑动条控件

slider控件,此控件是util控件,需要指定滑动节点,滑动轨道节点和位置变化触发事件就能实现滑动条的功能。控件不提供样式,需要额外编写。

如:

滑动条控件

Allocate

滑动条控件脚本所在

{lib}util/slider/slider.y.js

{lib}util/slider/slider.x.js

页面结构如下:

<html>
    <body>
        <div id="slide">
            <span id="mover"></span>
            <div id="cover"></div>
            <div id="show"></div>
        </div>
        <div id="slide2">
            <span id="mover2"></span>
            <div id="cover2"></div>
            <div id="show2"></div>
        </div>
    </body>
</html>

控件的原理为: show为下层,cover为上层,上层可以遮住下层,这样就可以表现出滑动的范围。slide是相对定位,mover,cover是绝对定位。这样鼠标拖动mover,就能自由的改变mover的位置。根据mover的位置的变化,改变cover的长宽,使其改变遮挡show的范围,就可以形成滑动的效果了。

添加slider控件依赖文件如下:

var f = function(){
    var _ = NEJ.P,
        _e = _('nej.e'),
        _p = _('nej.ut');

    //获取并初始化控件SliderY
    var _sliderY=_p._$$SliderY._$allocate({
        range:,        //滑动范围,默认为滑块可运动范围,如{x:[0,100],y:[0,1000]}
        slide:'mover', //滑动节点
        track:'slide', //滑动轨道节点
        /**
         * 位置变化触发事件
         * @param  {Object} _event 事件对象,包含:
         *                           stopped 是否结束,取值(true,false)
         *                           x       X轴方向变化对象,包含
         *                             rate  比例
         *                             value 值
         *                           y       Y轴方向变化对象,包含
         *                             rate  比例
         *                             value 值
         * @return {Void}
         */
        onchange:function(_event){
            //doing
            //改变cover的长宽,形成滑动的效果
            _e._$get('cover').style.height=_event.y.value-5+'px'; //cover为覆盖块节点
        }
    });

    //获取并初始化控件SliderX
    var _sliderX=_p._$$SliderX._$allocate({
        slide:'mover2', //滑块id
        track:'slide2', //滑动条id
        /**
         * [onchange description]
         * @param  {Object} _event 事件对象,包含:
         *                           stopped 是否结束,取值(true,false)
         *                           x       X轴方向变化对象,包含
         *                             rate  比例
         *                             value 值
         *                           y       Y轴方向变化对象,包含
         *                             rate  比例
         *                             value 值
         * @return {Void}
         */
        onchange:function(_event){
            //doing
            //改变cover的长宽,形成滑动的效果
            _e._$get('cover2').style.width=_event.x.value-5+'px'; //cover2为覆盖块节点
        }
    });
}
define(['{lib}util/slider/slider.y.js','{lib}util/slider/slider.x.js'],f);

Explain

参数

range 滑动范围,默认为滑块可运动范围

slide 滑动节点

track 滑动轨道节点

onchange 位置变化触发事件

更多的参数信息请参照slider.js api说明

Recycle

sliderY.$recycle();

sliderX.$recycle();

slider external interface

_$setRange(_range) 设置滑块可移动范围

_$setPosition(_rate) 设置滑动比例

Known Issues

Demo

slider控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus