script.aculo.us のスライダーを使った評価フォーム

投稿日: 2011年5月4日 作成者: alphasis

script.aculo.us ライブラリの slider.js による画像スライダーを使った評価フォーム。input 要素の type 属性に hidden を指定した、非表示データ用フィールドの値に、スライダーの値を、JavaScript で動的に入力することで、スライダーの値を送信できるようになる。
script.aculo.us のスライダーのトラックとハンドルを画像で表示のページで、紹介した画像スライダーを、フォーム用にカスタマイズしたもの。

実装例

デザイン性
3
低い

高い
実用性
3
低い

高い
好感度
3
低い

高い




サンプルなので、実際には送信しません。

実装例の動作について

スライダーの動作については、script.aculo.us のスライダーのトラックとハンドルを画像で表示のページで、紹介した画像スライダーと同様の動作である。
「以上の通り評価する」ボタンをクリックすると、「デザイン性:3、実用性:3、好感度:3の評価でよろしいですか？」という確認ダイアログが現れる。数字は、スライダーで指定した値になる。確認ダイアログで、「OK」をクリックすると送信され、「キャンセル」をクリックすると送信しない。

ソースコード

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-1', 'slider-track-1', {
        range: $R( 1, 5),
        values: [ 1, 2, 3, 4, 5 ],
        sliderValue: '3',
        onSlide: function( value ) {
            $( 'slider-value-1' ) . innerHTML = value;
            $( 'input-slider-1' ) . value = value;
        },
        onChange: function( value ) {
            $( 'slider-value-1' ) . innerHTML = value;
            $( 'input-slider-1' ) . value = value;
        }
    } );
    new Control . Slider( 'slider-handle-2', 'slider-track-2', {
        range: $R( 1, 5),
        values: [ 1, 2, 3, 4, 5 ],
        sliderValue: '3',
        onSlide: function( value ) {
            $( 'slider-value-2' ) . innerHTML = value;
            $( 'input-slider-2' ) . value = value;
        },
        onChange: function( value ) {
            $( 'slider-value-2' ) . innerHTML = value;
            $( 'input-slider-2' ) . value = value;
        }
    } );
    new Control . Slider( 'slider-handle-3', 'slider-track-3', {
        range: $R( 1, 5),
        values: [ 1, 2, 3, 4, 5 ],
        sliderValue: '3',
        onSlide: function( value ) {
            $( 'slider-value-3' ) . innerHTML = value;
            $( 'input-slider-3' ) . value = value;
        },
        onChange: function( value ) {
            $( 'slider-value-3' ) . innerHTML = value;
            $( 'input-slider-3' ) . value = value;
        }
    } );
}
// -->
</script>

CSS

<style type="text/css">
<!--
#slider-track-1, #slider-track-2, #slider-track-3 {
    float: left;
    background: url( slider-track.png ) no-repeat center center;
    width: 100px;
    height: 25px;
    border-top: 1px gray solid;
    border-bottom: 1px gray solid;
}
#slider-track-1:hover, #slider-track-2:hover, #slider-track-3:hover {
    background: url( slider-track-over.png ) no-repeat center center;
}
#slider-handle-1, #slider-handle-2, #slider-handle-3 {
    background: url( slider-handle-ball-20x20.png ) no-repeat center center;
    width: 20px;
    height: 25px;
    cursor: pointer;
}
#slider-handle-1:hover, #slider-handle-2:hover, #slider-handle-3:hover {
    background-image: url( slider-handle-ball-20x20-over.png );
}
#slider-value-1, #slider-value-2, #slider-value-3 {
    float: left;
    background-color: gray;
    color: white;
    height: 25px;
    width: 30px;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
    border: 1px gray solid;
    margin-right: 5px;
}
.slider-bad, .slider-good {
    float: left;
    background-color: white;
    color: dimgray;
    height: 25px;
    width: 50px;
    font-size: 12px;
    text-align: center;
    border: 1px gray solid;
    margin: 0;
}
.slider-title {
    float: left;
    height: 27px;
    width: 100px;
    font-size: 17px;
    text-align: right;
    padding-right: 10px;
}
.slider-bad {
    border-right: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.slider-good {
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.slider-wrap {
    margin: 5px 0;
}
#evaluation-form {
    padding-left: 100px;
}
-->
</style>

HTML

<div class="slider-wrap">
    <div class="slider-title">デザイン性</div>
    <div id="slider-value-1">3</div>
    <div class="slider-bad">低い</div>
    <div id="slider-track-1">
        <div id="slider-handle-1"></div>
    </div>
    <div class="slider-good">高い</div>
    <div style="clear: both;"></div>
</div>
<div class="slider-wrap">
    <div class="slider-title">実用性</div>
    <div id="slider-value-2">3</div>
    <div class="slider-bad">低い</div>
    <div id="slider-track-2">
        <div id="slider-handle-2"></div>
    </div>
    <div class="slider-good">高い</div>
    <div style="clear: both;"></div>
</div>
<div class="slider-wrap">
    <div class="slider-title">好感度</div>
    <div id="slider-value-3">3</div>
    <div class="slider-bad">低い</div>
    <div id="slider-track-3">
        <div id="slider-handle-3"></div>
    </div>
    <div class="slider-good">高い</div>
    <div style="clear: both;"></div>
</div>
<form name="evaluationForm" method="post" action="#" id="evaluation-form" onsubmit="return confirm( 'デザイン性:' + $( 'input-slider-1' ) . value + '、実用性:' + $( 'input-slider-2' ) . value + '、好感度:' + $( 'input-slider-3' ) . value + 'の評価でよろしいですか？' )">
    <input type="hidden" id="input-slider-1" name="input-slider-1" value="3" />
    <input type="hidden" id="input-slider-2" name="input-slider-2" value="3" />
    <input type="hidden" id="input-slider-3" name="input-slider-3" value="3" />
    <input type="submit" value="以上の通り評価する" />
</form>

要点解説

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-1', 'slider-track-1', {
        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-1' ) . innerHTML = value; // id が slider-value-1 の要素に表示
            $( 'input-slider-1' ) . value = value; // id が input-slider-1 の要素の値に代入
        },
        onChange: function( value ) { // スライダーのハンドルの移動後の位置の値を、
            $( 'slider-value-1' ) . innerHTML = value; // id が slider-value-1 の要素に表示
            $( 'input-slider-1' ) . value = value; // id が input-slider-1 の要素の値に代入
        }
    } );
    new Control . Slider( 'slider-handle-2', 'slider-track-2', {
        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-2' ) . innerHTML = value; // id が slider-value-2 の要素に表示
            $( 'input-slider-2' ) . value = value; // id が input-slider-2 の要素の値に代入
        },
        onChange: function( value ) { // スライダーのハンドルの移動後の位置の値を、
            $( 'slider-value-2' ) . innerHTML = value; // id が slider-value-2 の要素に表示
            $( 'input-slider-2' ) . value = value; // id が input-slider-2 の要素の値に代入
        }
    } );
    new Control . Slider( 'slider-handle-3', 'slider-track-3', {
        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-3' ) . innerHTML = value; // id が slider-value-3 の要素に表示
            $( 'input-slider-3' ) . value = value; // id が input-slider-3 の要素の値に代入
        },
        onChange: function( value ) { // スライダーのハンドルの移動後の位置の値を、
            $( 'slider-value-3' ) . innerHTML = value; // id が slider-value-3 の要素に表示
            $( 'input-slider-3' ) . value = value; // id が input-slider-3 の要素の値に代入
        }
    } );
}
// -->
</script>

スポンサード リンク

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