Script.aculo.us开发系列(9):Slider控件的使用

Slider控件是Script.aculo.us 的又一大特色,Slider控件就是一个元素可以在令一个元素(滑动杆)上滑动,并能计算出滑动的比例,http://wiki.script.aculo.us/scriptaculous/show/SliderDemo,是官方的例子,我自己的例子在http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/Slider.html,由于官方的例子已经做的很好了,控件嘛,其实都很简单的,比如Asp.net Ajax,如果你单看AjaxControlToolKit,无非是拖拽一些控件,然后设置一些属性,让后欣欣然以为自己学会了Asp.net Ajax,其实不然,更深的东西还是在Javascript的编程上.

声明方式

new Control.Slider('id_of_slider_handle','id_of_slider_track', [options]); 

• axis:滑动杆的方向:horizontal或者vertical ,默认为
• increment:没有看出有什么用,在源代码中也就出现了两次
• alignX :滑动杆的允许宽度,也是宽度的量程,如本来滑动杆的宽度是200,把alignX设置为100,则拖拽的最大位置在100处,在计算时认定此处位置为100%
• alignY:滑动杆的允许高度
• disabled :true/false,默认为false
• maximum/minimum:最大最小值
• sliderValue:初始值,默认为0
• values:允许值的集合,数组.
• range:范围,一般用$(minimum,maximum)生成,默认为$R(0,1)
• onSlide():滑动是调用该函数,接受参数value,表示当前值
• onChange():活动结束是调用该方法,接受参数value当前值
• setValue(value):可以直接调用这个函数设置值
• setDisabled()/setDisabled():设置disable属性

例子的源代码

var oSlider=null;
function init()
{
    oSlider=new Control.Slider("slider","sliderContainer",
    {
        axis:'horizontal',//水平方向
        handleImage:"imgSlider",//?
        handleDisabled:"imgSlider2",//?
        sliderValue:120,//初始值为120
        range:$R(40,240),//范围为40~240
        //increment:10,
        //minimum:40,
        //maximum:240,
        values:[40,80,120,160,200,240],//允许的值
        //alignX :200,
        onSlide:function(v){$('co').innerHTML='当前值: '+v;$("divTarget").style.width=v+'px';},
        onChange:function(v){$('co').innerHTML='改变,当前值 '+v;}
    });

}
Event.observe(window,'load',init);


function set80()
{
    oSlider.setValue(80);
}

function disable()
{
    oSlider.setDisabled();
}

function enable()
{
    oSlider.setEnabled();
}

Slider在计算值的时候是使用minimum+percentage*(maximum-minimum)来计算最终的值的,所以在上面例子中是不可能为0的.

到这里为止,Script.aculo.us这个框架已经介绍完了,这是第一次写一个这么长的系列的文章,可能很多的地方介绍的不详细或者不准确,恳请大家指正.我的Email: yanghengfeng@163.com Thnx a lot!