script.aculo.us ライブラリの slider.js によるスライダーのトラックを、メモリ付き画像にする。スライダーのハンドルは、、下のトラックがかすかに透けて見えるように、透過画像にする。マウスをポイントすると、画像を変える。
実装例
3
実装例の動作について
スライダーの値の範囲は、1～5 を指定してあり、初期設定値は、3 を指定してあるので、スライダーのハンドルは、トラックの中心にある。スライダーのハンドルを移動した時の値は、1、2、3、4、5 の5つの数字を指定してあるので、これらの数字以外にはならない。これらの数字に対応した5つメモリを、トラックの画像に付けてある。
スライダーのハンドル（丸い部分）の画像は、80%透過で、下のトラックがかすかに透けている。マウスをトラックにポイントすると、トラックの画像の色が濃くなる。マウスをハンドルにポイントすると、ハンドルの画像の色が薄くなり、よりトラックが透けて見えるので、トラックのメモリを参照しやすくなる。
スライダーのハンドル（丸い部分）をドラッグし左右に動かすと、スライダー左の「3」の数字が変化する。スライダーのハンドルを左端に動かすと「1」になる。スライダーのハンドルを右端に動かすと「5」になる。その間は、1より大きく、5より少ない、整数になる。
スライダーのトラック部分（グレーの部分）をクリックすると、瞬時に、その位置へハンドルが動く。
ソースコード
JavaScript
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous/slider.js"></script>
<script type="text/javascript">
<!--
window . onload = function () {
new Control . Slider( 'slider-handle', 'slider-track', {
range: $R( 1, 5),
values: [ 1, 2, 3, 4, 5 ],
sliderValue: '3',
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = value },
onChange: function( value ) { $( 'slider-value' ) . innerHTML = value }
} );
}
// -->
</script>
<script type="text/javascript" src="scriptaculous/slider.js"></script>
<script type="text/javascript">
<!--
window . onload = function () {
new Control . Slider( 'slider-handle', 'slider-track', {
range: $R( 1, 5),
values: [ 1, 2, 3, 4, 5 ],
sliderValue: '3',
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = value },
onChange: function( value ) { $( 'slider-value' ) . innerHTML = value }
} );
}
// -->
</script>
CSS
<style type="text/css">
<!--
#slider-track {
float: left;
background: url( slider-track.png ) no-repeat center center;
width: 100px;
height: 25px;
}
#slider-track:hover {
background: url( slider-track-over.png ) no-repeat center center;
}
#slider-handle {
background: url( slider-handle-ball-20x20.png ) no-repeat center center;
width: 20px;
height: 25px;
cursor: pointer;
}
#slider-handle:hover {
background-image: url( slider-handle-ball-20x20-over.png );
}
#slider-value {
float: left;
background-color: gray;
color: white;
width: 30px;
font-size: 12px;
text-align: center;
border-radius: 5px;
margin-right: 2px;
}
-->
</style>
<!--
#slider-track {
float: left;
background: url( slider-track.png ) no-repeat center center;
width: 100px;
height: 25px;
}
#slider-track:hover {
background: url( slider-track-over.png ) no-repeat center center;
}
#slider-handle {
background: url( slider-handle-ball-20x20.png ) no-repeat center center;
width: 20px;
height: 25px;
cursor: pointer;
}
#slider-handle:hover {
background-image: url( slider-handle-ball-20x20-over.png );
}
#slider-value {
float: left;
background-color: gray;
color: white;
width: 30px;
font-size: 12px;
text-align: center;
border-radius: 5px;
margin-right: 2px;
}
-->
</style>
HTML
<div id="slider-value">3</div>
<div id="slider-track">
<div id="slider-handle"></div>
</div>
<div style="clear: both;"></div>
<div id="slider-track">
<div id="slider-handle"></div>
</div>
<div style="clear: both;"></div>
画像
スライダーのトラックの画像
スライダーのトラックの上にマウスをポイントしたときの画像
スライダーのハンドルの画像
スライダーのハンドルの上にマウスをポイントしたときの画像
要点解説
JavaScript
<script type="text/javascript" src="prototype.js"></script>
prototype.js を読み込む。
<script type="text/javascript" src="scriptaculous/slider.js"></script>
script.aculo.us ライブラリの slider.js を読み込む。
<script type="text/javascript">
<!--
window . onload = function () {
new Control . Slider( 'slider-handle', 'slider-track', {
range: $R( 1, 5), // 範囲を 1～5 に設定
values: [ 1, 2, 3, 4, 5 ],
// ハンドル移動時の値を 1, 2, 3, 4, 5 に設定
sliderValue: '3', // 初期値を 3 に設定
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = value },
// スライダーのハンドルをスライドさせているときの値を、id が slider-value の要素に表示
onChange: function( value ) { $( 'slider-value' ) . innerHTML = value }
// スライダーのハンドルの移動後の位置の値を、id が slider-value の要素に表示
} );
}
// -->
</script>
<!--
window . onload = function () {
new Control . Slider( 'slider-handle', 'slider-track', {
range: $R( 1, 5), // 範囲を 1～5 に設定
values: [ 1, 2, 3, 4, 5 ],
// ハンドル移動時の値を 1, 2, 3, 4, 5 に設定
sliderValue: '3', // 初期値を 3 に設定
onSlide: function( value ) { $( 'slider-value' ) . innerHTML = value },
// スライダーのハンドルをスライドさせているときの値を、id が slider-value の要素に表示
onChange: function( value ) { $( 'slider-value' ) . innerHTML = value }
// スライダーのハンドルの移動後の位置の値を、id が slider-value の要素に表示
} );
}
// -->
</script>