jQuery Ratyの使い方

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

使い方

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

ダウンロードしたスクリプトをウェブサイトの任意の場所に配置する。

jQuery Ratyを使用するHTMLの中でJavaScriptを読み込む。RatyはjQueryのプラグインなので、jQueryのスクリプトも必要である。

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.raty.js"></script>

構文

jQuery Ratyの構文は次のとおり。

object.raty()

object: jQueryオブジェクト

Ratyのプロパティを指定することもできる。

object.raty(properties)

properties

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

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

使用例

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

<html>
  <head>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.raty.js"></script>
    <script>
      $(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
});

変更不可

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

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

ヒント

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

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

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

<html>
  <head>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.raty.js"></script>
    <script>
      $(function(){
        ('#star7').raty({ target: '#hint1' });
      });
    </script>
  </head>
  <body>
    <p id="star7"></p>
    <p>Hint: <span id="hint1"></span></p>
  </body>
</html>

Hint:

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

<html>
  <head>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.raty.js"></script>
    <script">
      $(function(){
        $('#star8').raty({ target: '#hint2', targetType: 'number' });
      });
    </script>
  </head>
  <body>
    <p id="star8"></p>
    <p>Hint: <span id="hint2"></span></p>
  </body>
</html>

Hint: