スター評価の挙動をカスタマイズするオプション指定
RateItプラグインの主なオプションを表3に示します。rateitクラスを指定する要素には「data-rateit-*」属性を用いて、JavaScriptでrateitメソッドを実行する場合は引数にオプション値を含むJavaScriptオブジェクトを用いて指定します。
| オプション名（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）
