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

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

イメージ

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

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

ダウンロード

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

設置

落としてきた 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 をいじるなりでカスタマイズできますよ。

終わりに

僕は使っていませんが、星を 1/4 単位で選択できるようにしたり、星クリック時に POST でデータを飛ばしたりもできるみたいです。使用頻度は高くないですが、もし必要になった際にはぜひ試してみてください。

photo
jQueryクックブック
jQuery Community Experts 株式会社クイープ
オライリージャパン 2010-08-18

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス JavaScript 第5版 iPhoneアプリケーション開発ガイド ―HTML+CSS+JavaScript による開発手法 Google API Expertが解説するHTML5ガイドブック jQuery ポケットリファレンス (POCKET REFERENCE)

by G-Tools , 2011/02/09

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ