script.aculo.us

前々から知っていたのですが、ちょっと載せておきます。
ジェネレーター系統のサイトで良くみかけるスライダーですが、こんな簡単に実装できるんです。

横スライダー

縦スライダー

縦スライダー(逆メーター)

五分割スライダー [0,50,100,150,200]

ブロック要素と連携したスライダー

コードはデモページに載っているものとほとんど同じです。
デモページ

コード


<p>横スライダー
<div id="track1" style="width:200px;background-color:#dfdfdf;height:5px;">
<div id="handle1" style="width:5px;height:10px;background-color:#1e90ff;cursor:move;"> </div>
</div>
<div id="debug1" style="padding-top: 5px;"></div></p>


<p>縦スライダー
<div id="track2" style="height:100px;background-color:#dfdfdf;width:5px;">
<div id="handle2" style="width:10px;height:5px;background-color:#1e90ff;cursor:move;"> </div></div>
<div id="debug2"></div></p>


<p>縦スライダー(逆メーター)
<div id="track5" style="height:100px;background-color:#dfdfdf;width:5px;">
<div id="handle5" style="width:10px;height:5px;background-color:#1e90ff;cursor:move;"> </div></div>
<div id="debug5"></div></p>


<p>五分割スライダー [0,50,100,150,200]
<div id="track3" style="width:200px;background-color:#dfdfdf;height:5px;">
<div id="handle3" style="width:5px;height:10px;background-color:#1e90ff;cursor:move;"> </div>
</div>
<div id="debug3" style="padding-top: 5px;"></div></p>


<p>ブロック要素と連携したスライダー
<div id="track4" style="background-color :#dfdfdf; width : 200px; height : 5px;">
<div id="handle4" style="width:10px;height:5px;background-color:#1e90ff;cursor:move;"> </div></div>
</div>
<div id="barreSortie4" style="background-color: #000; width: 0px; height: 7px; margin-top: 10px;"></div>
<div id="debug4" style="padding-top: 5px;"></div>

<p>
<!-- script.aculo.us/ -->
<script type="text/javascript">
// <![CDATA[
new Control.Slider('handle1','track1',{
onSlide:function(v){$('debug1').innerHTML='今の値は '+v+' です。';},
onChange:function(v){$('debug1').innerHTML='値が '+v+' に変わりました。';}});
new Control.Slider('handle2','track2',{axis:'vertical',
onSlide:function(v){$('debug2').innerHTML='今の値は '+v+' です。';},
onChange:function(v){$('debug2').innerHTML='値が '+v+' に変わりました。';}});
new Control.Slider('handle5','track5',{axis:'vertical',
onSlide:function(v){$('debug5').innerHTML='今の値は ' + (1-v)+' です。';},
onChange:function(v){$('debug5').innerHTML='値が '+ (1-v)+' に変わりました。';},
sliderValue:1});
new Control.Slider('handle3','track3',{range:$R(0,200),
values:[0,50,100,150,200],
onSlide:function(v){$('debug3').innerHTML='今の値は '+v+' です。';},
onChange:function(v){$('debug3').innerHTML='値が '+v+' に変わりました。';}});
new Control.Slider('handle4','track4',{range:$R(0,20),
values:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
onSlide:function(v){$('debug4').innerHTML='今の値は '+v+' です。';; $('barreSortie4').style.width=(v*3)+'px';},
onChange:function(v){$('debug4').innerHTML='値が '+v+' に変わりました。';}});
// ]]>
</script>
<!-- /script.aculo.us -->
</p>


• タグ
• JavaScript
• script.aculo.us
• スライダー