jQuery Ratyでレーティング（評価）表示

ホームページやブログの記事なんかにスター評価を表示させたい場合は、jQuery Ratyで簡単に設定出来ます。

jQuery Raty – A Star Rating Plugin

ダウンロード

まずは、必要なファイルを以下からダウンロードします。ダウンロードしたファイルを解凍して、jquery.raty.min.jsとimgフォルダ（星の画像）を任意の場所にアップロードします。

Raty on Github

ヘッダーでjsファイルの読み込み設定

jQueryファイルとratyのjsファイルをヘッダーで読み込みます。

jQuery読み込み

<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>

Raty読み込み

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

Ratyの設定

この場合は、Ratyを設置した箇所にスコア3なので、星が3つだけ色づいたレーティングが表示されます。

<script type="text/javascript">
    $('#star').raty({ score: 3 });
</script>

表示したい場所にコードを設置

以下のコードをレーティングを設置したい場所に記述します。

<div id="star"></div>

---

複数レーティング、動的表示

ページ内に複数のレーティング表示をしたい場合や、PHPなどで動的に表示させたい場合は、スコアをHTML側で設定するようにしてやれば簡単です。

read only、サーバ上の画像のパスは任意、スコアを動的に設定する場合

<script type="text/javascript">
	$(function() {
			$('#star').raty( {
			 readOnly: true,   //閲覧者によるスコアの変更不可  
			 score: function() {
			    return $(this).attr('data-score');
			 },
			 path:  'http://your-server.com/img/' //サーバ上のRaty画像のパス
});
		});
</script>

表示させたい場所に設置

<div id="star" data-score="<?php echo $score1 ;?>"></div>
<div id="star" data-score="<?php echo $score2 ;?>"></div>
<div id="star" data-score="<?php echo $score3 ;?>"></div>

コード内にも説明がありますが、readOnlyをtrueにすると閲覧モード（投票機能なし）、scoreの設定は、HTML側のdata-scoreの値（$score1,$score2,$score3）でレーティングスコアの設定、pathの項目で星画像のパス設定、といった感じです。これなら、PHPで動的にレーティング表示させるのも簡単に実装出来ますね。