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]);
声明方式
![](/Images/OutliningIndicators/None.gif)
- 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的.
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();
}
到这里为止,Script.aculo.us这个框架已经介绍完了,这是第一次写一个这么长的系列的文章,可能很多的地方介绍的不详细或者不准确,恳请大家指正.我的Email: yanghengfeng@163.com Thnx a lot!