利用者の操作を検出できるイベント
RateItでは利用者の操作に対応した表4のようなイベントが定義されています。
| イベント名 | 内容 | 備考 |
|---|---|---|
| rated | 評価値を確定した時 | - |
| reset | 評価値をリセットした時 | - |
| over | マウスオーバー時 | マウスオーバー時点の評価値を取得可能 |
| beforerated | 評価値を確定する直前 | preventDefaultによりイベントを打ち消し可能 |
| beforereset | 評価値をリセットする直前 | preventDefaultによりイベントを打ち消し可能 |
RateItのイベント実装例をリスト4に示します。
リスト4 RateItのイベント実装例（004_RateIt_4.html）
// 評価値を確定した時
$("#rateit1").on("rated", function(){
$("#msg1").text("event: rated");
});
// 評価値をリセットした時
$("#rateit1").on("reset", function(){
$("#msg1").text("event: reset");
});
// マウスオーバー時
$("#rateit1").on("over", function(event, value){
// valueにその時点の評価値が格納される
$("#msg2").text("event: over, value= " + value);
});
// 評価値を確定する直前
$("#rateit1").on("beforerated", function(event, value){
$("#msg3").text("event: beforerated, value= " + value);
// confirmでキャンセルした時にはイベントをなかったことに
if (!confirm("値を"+ value + "に変更します。よろしいですか？")) {
event.preventDefault();
}
});
// 評価値をリセットする直前
$("#rateit1").on("beforereset", function(event){
$("#msg3").text("event: beforereset");
// confirmでキャンセルした時にはイベントをなかったことに
if (!confirm("値をリセットします。よろしいですか？")) {
event.preventDefault();
}
});
リスト4を実行して評価値の確定・リセット、マウスオーバーを行うとイベントが発生してWebページにイベント内容が表示されます。また評価値を確定・リセットする直前には確認ダイアログ（confirm）が表示され、キャンセルを選択するとそのイベントをなかったことにできます。
図5 RateItのイベント操作例（004_RateIt_4.html）
RateItを操作するJavaScriptメソッド
JavaScriptにおいてrateitメソッドの引数にオプション名を指定して、オプション値や現在の評価値を取得・設定することができます。またrateitメソッドの引数に"reset"を指定することで、評価値を初期状態に戻すことができます。メソッドの使用例をリスト5に示します。
リスト5 オプション値の取得・設定、リセット操作（005_RateIt_5.html）
$("#btn1").on("click", function(){
// 現在の評価値を取得
alert("Value= " + $("#rateit1").rateit("value"));
});
$("#btn2").on("click", function(){
// 現在の評価値を設定
$("#rateit1").rateit("value", 10);
});
$("#btn3").on("click", function(){
// 最大値を取得
alert("MaxValue= " + $("#rateit1").rateit("max"));
});
$("#btn4").on("click", function(){
// 最大値を設定
$("#rateit1").rateit("max", 10);
});
$("#btn5").on("click", function(){
// リセット
$("#rateit1").rateit("reset");
});
リスト5を実行すると図6のように、ボタン押下でスター評価の内容を操作できるようになります。
図6 RateItから現在の評価値を取得する様子（005_RateIt_5.html）
