script.aculo.us のスライダーのトラックとハンドルを画像で表示

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>

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>

HTML

<div id="slider-value">3</div>
<div id="slider-track">
    <div id="slider-handle"></div>
</div>
<div style="clear: both;"></div>

画像

slider-track.pngスライダーのトラックの画像
slider-track-over.pngスライダーのトラックの上にマウスをポイントしたときの画像
slider-handle-ball-20x20.png スライダーのハンドルの画像
slider-handle-ball-20x20-over.png スライダーのハンドルの上にマウスをポイントしたときの画像

要点解説

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>

スポンサード リンク

カテゴリー: GUI, JavaScript, prototype.js, script.aculo.us, slider パーマリンク