用scriptaculous实现slider
今天做一个播放器的声音控制按钮 本想自己用js+css来实现，忽然想起了scriptaculous的特效 不如用它来实现
赶紧下载了scriptaculous 网址为：script.aculo.us
解压后 把js文件放到自己喜欢的目录，一共有7 8个吧，然后导入你的jsp文件中
开始完成我的slider
scriptaculous要求你的滑动条是两个div嵌套的 外层div作为容器 里面的div作为滑动手柄 如下
手柄样式可以根据自己的喜好指定 这儿指定的是一张图片<img src="img/yinliang2.gif" />
然后开始写我们的js代码
非常简单 一个类就搞定了
参数就不用多解释了吧 相信都能看懂 更多参数去官方网站查询
最后有一句是调用这个init方法的，意思应该是在窗口加载的时候执行init方法
Event.observe(window,'load',init);
ok 一个漂亮的slider就完成了
附完整代码
赶紧下载了scriptaculous 网址为：script.aculo.us
解压后 把js文件放到自己喜欢的目录，一共有7 8个吧，然后导入你的jsp文件中
<script type="text/javascript" src="scripts/scriptaculous/prototype.js"></script> <script type="text/javascript" src="scripts/scriptaculous/scriptaculous.js"></script>
开始完成我的slider
scriptaculous要求你的滑动条是两个div嵌套的 外层div作为容器 里面的div作为滑动手柄 如下
<div id="volumetrack" style="border:1px solid red; height:10; width:400;">
<div id="volumehandle" style="border:1px solid yellow; float:left; cursor:hand;"><img src="img/yinliang2.gif" /></div>
</div>
手柄样式可以根据自己的喜好指定 这儿指定的是一张图片<img src="img/yinliang2.gif" />
然后开始写我们的js代码
非常简单 一个类就搞定了
function init(){
oSlider = new Control.Slider( 'volumehandle', 'volumetrack',
{
axis:'horizontal',
sliderValue:120,
range:$R(40,240),
minimum:40,
maximum:240,
values:[40,80,120,160,200,240],
onChange:function(v){ alert(v); }
}
);
}
参数就不用多解释了吧 相信都能看懂 更多参数去官方网站查询
最后有一句是调用这个init方法的，意思应该是在窗口加载的时候执行init方法
Event.observe(window,'load',init);
ok 一个漂亮的slider就完成了
附完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>testSlider.html</title>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="scripts/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous/scriptaculous.js"></script>
<script language="javascript">
var oSlider = null;
function init(){
oSlider = new Control.Slider( 'volumehandle', 'volumetrack',
{
axis:'horizontal',
sliderValue:120,
range:$R(40,240),
minimum:40,
maximum:240,
values:[40,80,120,160,200,240],
onChange:function(v){ alert(v); }
}
);
}
Event.observe(window,'load',init);
</script>
</head>
<body>
<div id="volumetrack" style="border:1px solid red; height:10; width:400;">
<div id="volumehandle" style="border:1px solid yellow; float:left; cursor:hand;"><img src="img/yinliang2.gif" /></div>
</div>
<br>
</body>
</html>