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

核心提示：Slider控件是Script.aculo.us 的又一大特色,Slider控件就是一个元素可以在令一个元素(滑动杆)上滑动,并能计算出滑动的比例,http://wiki.script.aculo.us/scriptaculous/show/SliderDemo,是官方的例子,我自己的例子在http://www1.qc

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!

系列文章：

Script.Aculo.Us开发系列(一):起步

Script.aculo.us开发系列(二):EffectsAPI

Script.aculo.us开发系列(三):核心效果(CoreEffect)

Script.aculo.us开发系列(四):动画弹出菜单的实现-开发自己的动画

Script.aculo.us开发系列(五):Prototype封装的艺术

Script.aculo.us开发系列(六):AutoComplete控件

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

Script.aculo.us开发系列(八):使用DropDrag定义拖拽行为

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

Prototype1.5.0 API 参考