WEB开发网
开发学院网页设计JavaScript Script.aculo.us开发系列(九):Slider控件的使用 阅读

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

 2010-09-14 13:38:26 来源:WEB开发网   
核心提示: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: [email protected] 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 参考

Tags:Script aculo us

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接