jQuery の starRatingプラグイン を使用して、5段階評価をします。
jQuery Star Rating Plugin のページから、プラグイン、CSS、画像等をダウンロードできます。
対象プラグインを、下記より入手してください。
* jQuery
* jQuery Star Rating Plugin
サンプル
5段階評価
10段階評価
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

