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

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

スター評価の挙動をカスタマイズするオプション指定

　RateItプラグインの主なオプションを表3に示します。rateitクラスを指定する要素には「data-rateit-*」属性を用いて、JavaScriptでrateitメソッドを実行する場合は引数にオプション値を含むJavaScriptオブジェクトを用いて指定します。

表1　RateItの主なオプション

オプション名（rateitクラス）	オプション名（JavaScript）	内容	初期値
data-rateit-value	value	評価の初期値	最小値と同一
data-rateit-min	min	最小値	0
data-rateit-max	max	最大値	5
data-rateit-step	step	評価値の刻み	0.5
data-rateit-readonly	readonly	読み取り専用	false
data-rateit-starwidth	starwidth	星の幅	16
data-rateit-starheight	starheight	星の高さ	16

　data-rateit-*およびJavaScriptオブジェクトを用いたオプション値の設定例をリスト2に示します。

リスト2　RateItのオプション設定（002_RateIt_2.html）

// JavaScriptオブジェクトでオプション値を設定
$("#rateit1").rateit({
    value: 3,
    min: 0,
    max: 10,
    step: 1,
});
（中略）
<!-- data-*によりオプション値を指定 -->
<div class="rateit"
    data-rateit-value="3"
    data-rateit-min="0"
    data-rateit-max="10"
    data-rateit-step="1">
</div>

　リスト7を実行すると、0～10まで1刻みの指定ができるスター評価が初期値3で2個（クラス指定によるものとJavaScriptによるもの）表示されます。

図3　リスト7の実行結果（002_RateIt_2.html）

CSSでスターの外見をカスタマイズ

　スター評価の表示はCSSで変更可能です。リスト3ではcircleクラスにスター評価の表示型式を定義しています。

リスト3　スターの表示変更を行うCSS記述（003_RateIt_3.html）

<style>
/* 未選択時 */
div.circle div.rateit-range {
    background: url(img/circle_gray.png);
}
/* マウスオーバー時 */
div.circle div.rateit-hover {
    background: url(img/circle_green.png);
}
/* 選択時 */
div.circle div.rateit-selected {
    background: url(img/circle_red.png);
}

/* リセットボタン */
div.circle button.rateit-reset {
    background: url(img/circle_reset.png);
    width:50px;
    height:50px;
}
/* リセットボタン：マウスオーバー時 */
div.circle button.rateit-reset:hover {
    background: url(img/circle_reset_on.png);
}
</style>

　リスト3を実行すると、スターの代わりに色違いの丸印で評価が表示されます。

図4　スターの表示を変更した例（003_RateIt_3.html）