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

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

実装例（サンプル）

実装例（サンプル）について

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

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

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

実装例（サンプル）の動作について

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

実装例（サンプル）のソースコード

読み込み

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

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

JavaScript

解説

• animate： トラック上のクリックした場所へ、ハンドルを、アニメーション動作で移動させるオプション。「slow」を設定すると、ゆっくりとした速度のアニメーション動作で移動する。
• range: ハンドルの位置に応じて、トラックの色を変更するオプション。「min」を設定すると、ハンドルの位置の数値より小さい方のトラックを着色する。
• value: jQuery UI の Slider プラグインの初期値を設定するオプション。
• min： jQuery UI の Slider プラグインの最小値を設定するオプション。
• max： jQuery UI の Slider プラグインの最大値を設定するオプション。

CSS

HTML

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