slider - 滑块控件

滑块控件是进度条控件,可以用来音量调节,播放器进度条等由鼠标移动触的值改变的控件,可以是横向变值,也可以纵向变值

如:

滑块控件

Allocate

ui selector控件所在脚本 {lib}util/slider/slider.x.js 横向拖动 {lib}util/slider/slider.y.js 纵向拖动 {lib}util/slider/slider.xy.js 任意向拖动

页面结构如下:

横向拖动的样式:

*{marign:0;padding:0;border:0;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;}
.slide{position:relative;width:20px;padding:4px 0;}
.slide .show{height:104px;background:#f00 url(nej_color_mask.png) repeat-x;border:1px solid #aaa;}
.slide .mover{position:absolute;top:0;left:-2px;height:5px;width:100%;overflow:hidden;border:2px solid #000;}
.slide .cover{position:absolute;top:5px;left:1px;right:1px;height:0;background:#fdc;overflow:hidden;}

结构:

<div class="slide1" id="xxx1">
  <span class="mover" id="yyy1">&nbsp;</span>
  <div class="cover" id="zzz1">&nbsp;</div>
  <div class="show">&nbsp;</div>
</div>

分配:

define(['{lib}util/slider/slider.y.js','{lib}util/slider/slider.x.js'],function(){
            var _slider = nej.ut._$$SliderX._$allocate({
                slide:'yyy1',track:'xxx1',
                onchange:function(_event){
                    //console.log(_event.y.rate+':'+_event.y.value)
                    nej.e._$get('zzz1').style.width = _event.x.value+'px';
                }
            });
        });
}

以上是创建横向拖动的样式,结构和方法,如果要改造成纵向拖动,可以改变一下样式,结构也是一样的,分配的时候用_$$SliderY分配就可以了

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

Explain

参数 range [Object] - 滑动范围,默认为滑块可运动范围,如{x:[0,100],y:[0,1000]}

slide [String|Node] - 滑动节点

track [String|Node] - 滑动轨道节点

onchange [Function] - 滑动触发事件,输入格式如{x:{rate:0.4,value:40},y:{rate:0.5,value:50}}

Recycle

slider.$recycle();

Suggest external interface

slider.$setRange() 设置滑块可移动范围

slider.$setPosition() 设置滑块位置

Known Issues

窗体改变时,滑块位置可能需要刷新,需要_$setRange一下。

在onchange回调方法里有_event里有stopped属性,如果为真,说明已经确认的一个值,否则只是滑动的值,不一定是确认的, 比如果视频上在拖动进度条,但在拖动的过程中是不要改变视频时间,所以在确认后再改变时间

Demo

slider控件demo

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