jQuery UI の Slider、Dialog、Button による複数評価項目フォーム

jQuery UI の Slider プラグインのスライダー、Dialog プラグインのダイアログ、Button プラグインのボタンなどを使い、複数の評価項目の評価送信フォームを作る方法。実装例(サンプル)は、好感度、実用性、デザイン性、独創性、技術力の5つの評価項目についての評価フォーム。「以上の通り評価する」を、クリックすると確認ダイアログが現れる。

実装例(サンプル)

好感度:
50
実用性:
50
デザイン性:
50
独創性:
50
技術力:
50

好感度:

実用性:

デザイン性:

独創性:

技術力:

以上の通りの評価を、送信してもよろしいですか?

実装例(サンプル)について

好感度、実用性、デザイン性、独創性、技術力の5つの評価項目についての評価フォーム。

初期値、最小値、最大値に下の値を設定してある。

  • 初期値: 50
  • 最小値: 0
  • 最大値: 100

実装例(サンプル)の動作について

  • スライダー中央の四角のハンドルをドラックして、トラック上を移動させることができる。
  • トラック上をクリックすると、ハンドルを、その場所へ、アニメーション動作で、移動させることができる。
  • ハンドルの左側をグレーに着色する。
  • 各スライダーに合わせて、各評価項目名の右側の点数が変化する。
  • 「以上の通り評価する」ボタンを押すと、確認ダイアログが現れる。
  • 確認ダイアログ内の「送信」ボタンを押すと、送信し、実装例(サンプル)の送信フォームの下に、「実装例(サンプル)送信結果」が現れる。[(注意)「実装例(サンプル)送信結果」の表示には、PHPを使っているので、下で公開しているソースコードだけでは、実現できない。]
  • 確認ダイアログ内の「キャンセル」ボタンを押すと、送信しないで、ダイアログを閉じる。

実装例(サンプル)のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

「jquery.ui.slider.js」だけでなく、「jquery.ui.button.js」「jquery.ui.dialog.js」「jquery.ui.resizable.js」等々、多くのファイルを読み込む必要があるので、下記のようにして、まとめて読み込んでしまおう。

<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-ui-slider > div > .jquery-ui-slider-multi' ) . each(function() {
        var value = parseInt( jQuery( this ) . text(), 10 );
        var inputValue = '.' + jQuery( this ) . attr( 'id' ) + '-value';
        jQuery( this ) . empty() . slider( {
            value: value,
            range: 'min',
            animate: true,
            slide: function( event, ui ) {
                jQuery( inputValue ) . val( ui . value );
                jQuery( inputValue ) . html( ui . value );
            }
        } );
        jQuery( inputValue ) . val( jQuery( this ) . slider( 'value' ) );
        jQuery( inputValue ) . html( jQuery( this ) . slider( 'value' ) );
    } );
    jQuery( 'button', '#jquery-ui-slider' ) . button();
    jQuery( 'button', '#jquery-ui-slider' ) . click( function() {
        jQuery( '#jquery-ui-dialog' ) . dialog( 'open' );
    } );
    jQuery( '#jquery-ui-dialog' ) . dialog( {
        autoOpen: false,
        show: 'explode',
        hide: 'explode',
        modal: true,
        buttons: {
            '送信': function() {
                jQuery( this ) . submit();
                jQuery( this ) . dialog( 'close' );
            },
            'キャンセル': function() {
                jQuery( this ) . dialog( 'close' );
            },
        }
    } );
} );
// -->
</script>
解説
  • animate: トラック上のクリックした場所へ、ハンドルを、アニメーション動作で移動させるオプション。「slow」を設定すると、ゆっくりとした速度のアニメーション動作で移動する。
  • range: ハンドルの位置に応じて、トラックの色を変更するオプション。「min」を設定すると、ハンドルの位置の数値より小さい方のトラックを着色する。
  • value: jQuery UI の Slider プラグインの初期値を設定するオプション。
  • min: jQuery UI の Slider プラグインの最小値を設定するオプション。
  • max: jQuery UI の Slider プラグインの最大値を設定するオプション。

CSS

<style>
<!--
#jquery-ui-slider {
    margin: 0 10px;
    padding: 10px;
    width: 500px;
    border: 1px solid gray;
    border-radius: 10px;
    background: whitesmoke;
    text-align: center;
}
#jquery-ui-slider div div.jquery-ui-slider-title {
    width: 100px;
    text-align: right;
}
#jquery-ui-slider div div input {
    width: 40px;
    margin: 0;
    border: 0;
    color: red !important;
    background-color: transparent;
    text-align: center;
}
#jquery-ui-slider div div.float-left {
    float: left;
}
#jquery-ui-slider div div.float-clear {
    clear: both;
}
#jquery-ui-slider div.jquery-ui-slider-item {
    margin: 2px;
}
.jquery-ui-slider-multi {
    width: 300px;
    margin: 4px 10px;
}
#jquery-ui-slider button {
    margin: 5px;
    width: 300px;
}
-->
</style>

HTML

<div id="jquery-ui-slider" >
    <div class="jquery-ui-slider-item ">
        <div class="jquery-ui-slider-title float-left ">好感度:</div>
        <div class="float-left"><input type="text" class="jquery-ui-slider-favorable-rating-value" /></div>
        <div class="jquery-ui-slider-multi float-left" id="jquery-ui-slider-favorable-rating">50</div>
        <div class="float-clear"></div>
    </div>
    <div class="jquery-ui-slider-item ">
        <div class="jquery-ui-slider-title float-left ">実用性:</div>
        <div class="float-left"><input type="text" class="jquery-ui-slider-utility-value" /></div>
        <div class="jquery-ui-slider-multi float-left" id="jquery-ui-slider-utility">50</div>
        <div class="float-clear"></div>
    </div>
    <div class="jquery-ui-slider-item ">
        <div class="jquery-ui-slider-title float-left ">デザイン性:</div>
        <div class="float-left"><input type="text" class="jquery-ui-slider-designability-value" /></div>
        <div class="jquery-ui-slider-multi float-left" id="jquery-ui-slider-designability">50</div>
        <div class="float-clear"></div>
    </div>
    <div class="jquery-ui-slider-item ">
        <div class="jquery-ui-slider-title float-left ">独創性:</div>
        <div class="float-left"><input type="text" class="jquery-ui-slider-originality-value" /></div>
        <div class="jquery-ui-slider-multi float-left" id="jquery-ui-slider-originality">50</div>
        <div class="float-clear"></div>
    </div>
    <div class="jquery-ui-slider-item ">
        <div class="jquery-ui-slider-title float-left ">技術力:</div>
        <div class="float-left"><input type="text" class="jquery-ui-slider-technical-skill-value" /></div>
        <div class="jquery-ui-slider-multi float-left" id="jquery-ui-slider-technical-skill">50</div>
        <div class="float-clear"></div>
    </div>
    <button>以上の通り評価する</button>
</div>
<form name="evaluationForm" method="post" action="#"  id="jquery-ui-dialog" title="確認">
    <p>好感度:<span class="jquery-ui-slider-favorable-rating-value"></span><input type="hidden" name="jquery-ui-slider-favorable-rating-value" class="jquery-ui-slider-favorable-rating-value" /></p>
    <p>実用性:<span class="jquery-ui-slider-utility-value"></span><input type="hidden" name="jquery-ui-slider-utility-value" class="jquery-ui-slider-utility-value" /></p>
    <p>デザイン性:<span class="jquery-ui-slider-designability-value"></span><input type="hidden" name="jquery-ui-slider-designability-value" class="jquery-ui-slider-designability-value" /></p>
    <p>独創性:<span class="jquery-ui-slider-originality-value"></span><input type="hidden" name="jquery-ui-slider-originality-value" class="jquery-ui-slider-originality-value" /></p>
    <p>技術力:<span class="jquery-ui-slider-technical-skill-value"></span><input type="hidden" name="jquery-ui-slider-technical-skill-value" class="jquery-ui-slider-technical-skill-value" /></p>
    <p>以上の通りの評価を、送信してもよろしいですか?</p>
</form>

form の action のURLは、送信した評価を処理させるプログラムなどのURLを指定する。

スポンサード リンク

カテゴリー: Button, Dialog, GUI, JavaScript, jQuery, jQuery UI, Slider, フォーム パーマリンク