星5つ！ 評価を表示・入力できるスター表示プラグインRateIt

「jQuery プラグイン」の利用（27）

利用者の操作を検出できるイベント

　RateItでは利用者の操作に対応した表4のようなイベントが定義されています。

表2　RateItで利用できるイベント

イベント名	内容	備考
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）