创建具有跨度元素的MooTools滑块
MooTools滑块是一个很好的小应用程序，它为将滑块工具添加到站点提供了一种可靠的方法。但是，MooTool滑块缺少的一件事是一个块，覆盖了滑块左侧，手柄之前的内容。
用以下HTML创建一个页面。
滑块元素具有以下结构。
div <- container for the slider ---span <- the span element ---div <- handle ------img <- image to make the handle pretty
您将需要下载MooTools库才能运行此工具。
创建一个样式文件（slider.css在名为style的目录中调用）并添加以下内容。
#track1{
width:500px;
padding:0;
margin:0;
height:18px;
background-color: #09f;
}
#handle1{
padding:0;
margin:-20px 0 0 0;
width:18px;
height:18px;
}
span#track1span{
display:block;
padding:0;
margin:0;
background-color: #222;
height:18px;
width:50%;
}现在是脚本的重要部分。slider.js在脚本目录中创建一个名为的文件，并在其中添加以下代码。我在此处添加了很多注释，以使每一行的工作变得清晰。
//设置轨道阵列
var handleArr = new Object();
handleArr["track1"]=250; //设定初始值
//设置滑块的效果
var track1Span = new Fx.Style($('track1span'),'width',{duration:0});
var slider1 = new Slider($('track1'),$('handle1'),{
steps:500, //赛道上有250步
offset:0, //零偏移使手柄适合轨道
onChange: function(pos){
track1Span.set(pos);
handleArr['track1'] = parseInt(pos); //店铺位置
updateTestDiv(); //运行功能来做某事
}
}).set(handleArr["track1"]); //设定初始位置
//用于更新带有手柄位置的测试标签的功能
function updateTestDiv(pos){
$('test').innerHTML = handleArr['track1'];
}该滑块所做的全部工作就是使用滑块手柄的当前位置用测试ID更新ap标签。
关于此脚本的理想之处在于，在其中添加更多轨道非常容易，您只需要稍微复制一下代码即可为slider2创建变量，依此类推。