jQuery Ratyはレーティング(格付け)を星型のアイコンで表示及び入力できるjQueryプラグインである。

jQeury Ratyの使い方

jQuery Ratyを使用するには、https://github.com/wbotelhos/ratyからjquery.raty.jsをダウンロードする。

object.raty([options])
object

jQueryオブジェクト

options

Ratyのプロパティを指定する。

Ratyのプロパティ
プロパティ説明
half 星を半分単位で表示する
hints 星それぞれについてヒントを表示する。
number 表示する星の個数を数値又はコールバック関数で指定する。
precision レーティングを整数ではなく実数で小数点以下も含めて入力する。
readOnly 表示のみで入力できないようにするかどうかをブール値又はコールバック関数で指定する。
score スコアの初期値を数値又はコールバック関数で指定する。
scoreName パラメータ名
size 星のサイズ
starOff オフ状態イメージのファイル名
starOn オン状態イメージのファイル名
target レーティングのヒント表示をポップアップ表示ではなく、別の場所にヒントを表示する場合、そのセレクタを指定する。
targetType targetを指定した場合、ヒント表示方法を指定する。

jQuery Ratyの使用例を次に示す。

<html>
  <head>
    <script type="application/javascript" src="./js/jquery.raty.js"></script>
    <script type="application/javascript">
      $(function(){
        $('#star1').raty();
      });
    </script>
  </head>
  <body>
    <p id="star1"></p>
  </body>
</html>

現在のスコアを取得する。

var score = $('#star1').raty('score');

表示する星の個数を指定する例を示す。

$('#star2').raty({
  number: 3
});

スコアの初期値を指定する例を示す。

$('#star3').raty({
  score: 3
});

星を半分単位で表示する例を示す。

$('#star4').raty({
  half: true
});

ヒントを表示する例を示す。

$('#star5').raty({
  hints: ["poor", null, 'normal', undefined, "great!"]
});

表示のみで入力できないレーティングの例を示す。

$('#star6').raty({
  readOnly: true,
  score: 4
});

ヒントをポップアップではなく、別の場所に表示する例を示す。

<html>
  <head>
    <script type="application/javascript" src="./js/jquery.raty.js"></script>
    <script type="application/javascript">
      $(function(){
        ('#star7').raty({ target: '#hint1' });
      });
    </script>
  </head>
  <body>
    <p id="star7"></p>
    <p id="hint1" style="border: solid 1px; height: 1.5em; width: 8em;"></p>
  </body>
</html>

ヒントを数字で表示する例を示す。

<html>
  <head>
    <script type="application/javascript" src="./js/jquery.raty.js"></script>
    <script type="application/javascript">
      $(function(){
        $('#star8').raty({ target: '#hint2', targetType: 'number' });
      });
    </script>
  </head>
  <body>
    <p id="star8"></p>
    <p id="hint2" style="border: solid 1px; height: 1.5em; width: 2em;"></p>
  </body>
</html>