jQuery Star Rating Plugin で iTunes 風のレイティングを実装する

JavaScript

2011.02.09

イメージ

雪が降ってるってマジですか？nakamura です。

そうしょっちゅうはないと思いますが、ユーザに何かしらの評価をさせるシステムってあると思います。UI の選択肢も様々ですが、今日はそんな中から iTunes っぽい星アイコンでレイティングの機能を実現する jQuery Star Rating Plugin をご紹介します。

ダウンロード

ダウンロードはこちらから。Download のタブから star-rating.zip を落としてきてください。

jQuery Star Rating Plugin

設置

落としてきた zip を解凍するとたくさんファイルが出てきますが、必要なのは以下の 4 つです。

jquery.rating.js
jquery.rating.css
delete.gif
star.gif

また別途 jQuery の本体が必要です。star-rating.zip に付属しているものでも構いませんし、システムで既に使っているものがあればそちらでも良いでしょう。（あまりにバージョンが古いと動かないかも）

上記 4 つのファイルをドキュメントルート以下のお好みの場所に保存してください。今回は /js/star-rating/ に保存した想定で話しを進めます。

記述例

以下簡単な記述例です。レイティングデータの実態は radio ボタンなんですね～。

html の head タグ内に以下を記述して、

<link rel="stylesheet" type="text/css" href="/js/star-rating/jquery.rating.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js">
<script type="text/javascript" src="/js/star-rating/jquery.rating.js"></script>

レイティングを表示させたい場所に以下のような input タグを書きます。

<input name="rate" type="radio" class="star"/>
<input name="rate" type="radio" class="star"/>
<input name="rate" type="radio" class="star"/>
<input name="rate" type="radio" class="star"/>
<input name="rate" type="radio" class="star"/>

終わり！チョーーかんたん！radio ボタンの class 属性に star を指定するだけでよいのです。見た目を変えたい人は画像を差し替えるなり、付属の CSS をいじるなりでカスタマイズできますよ。