jQuery raty()

jQuery Ratyはレーティング(格付け)を星型のアイコンで表示及び入力できるjQueryプラグインである。jQuery Ratyを使用するには、https://github.com/wbotelhos/ratyからjquery.raty.jsをダウンロードする。

object.raty([options])

object
jQueryオブジェクト
プロパティ説明
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>
    <div id="star1"></div>
  </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>
    <div id="star7"></div>
    <div id="hint1" style="border: solid 1px; height: 1.5em; width: 8em;"></div>
  </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>
    <div id="star8"></div>
    <div id="hint2" style="border: solid 1px; height: 1.5em; width: 2em;"></div>
  </body>
</html>