posts - 22, comments - 65, trackbacks - 11, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

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

Posted on 2007-09-16 13:38 Hafeyang 阅读(...) 评论(...) 编辑 收藏
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!