jQuery の starRatingプラグイン を使用して、5段階評価をします。
jQuery Star Rating Plugin のページから、プラグイン、CSS、画像等をダウンロードできます。

対象プラグインを、下記より入手してください。
* jQuery
* jQuery Star Rating Plugin

サンプル

5段階評価


10段階評価

サンプルソース

JavaScript + CSS

<link rel="stylesheet" type="text/css" href="http://www.strollnet.com/js/jquery/css/rating.css" />
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery.rating.pack.js"></script>
<!-- ↓10段階評価用 -->
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery.MetaData.mini.js"></script>

HTML

5段階評価<br />
<input type="radio" class="star" name="api-select-test" value="A"/>
<input type="radio" class="star" name="api-select-test" value="B"/>
<input type="radio" class="star" name="api-select-test" value="C"/>
<input type="radio" class="star" name="api-select-test" value="D"/>
<input type="radio" class="star" name="api-select-test" value="E"/>
<br />
<br />
10段階評価<br />
<input type="radio" class="star {split:2}" name="api-readonly-test" value="1"/>
<input type="radio" class="star {split:2}" name="api-readonly-test" value="2"/>
<input type="radio" class="star {split:2}" name="api-readonly-test" value="3"/>
<input type="radio" class="star {split:2}" name="api-readonly-test" value="4"/>
<input type="radio" class="star {split:2}" name="api-readonly-test" value="5"/>
<input type="radio" class="star {split:2}" name="api-readonly-test" value="6"/>
<input type="radio" class="star {split:2}" name="api-readonly-test" value="7"/>
<input type="radio" class="star {split:2}" name="api-readonly-test" value="8"/>
<input type="radio" class="star {split:2}" name="api-readonly-test" value="9"/>
<input type="radio" class="star {split:2}" name="api-readonly-test" value="10"/>
<br style="clear:both;" />
カテゴリ: JavaScript 2010/04/20 2:27

コメントをどうぞ