コニファ・ロゴ

csstest:jquery.rating.jsを使ってレイティング・星で5段階評価

jQueryプラグインのjquery.rating.jsを使って、星アイコンによる5段階レイティングです。サンプルの(1)は、グレイの星をクリックして、評価可能(変更可能)、予めのチェックはありません。(2)は、3番目のチェックが入っていて、変更も可能です。(3)は、3番目のチェックが入っていて、変更不可です。また、(1)と(2)の「-」ボタンをクリックすると、星は0になります。

サンプル

(1)チェック無し。変更可能。
» 
(2)チェック3番目。変更可能。
» 
(3)チェック3番目。変更不可。
» 

(1)のhtmlソース

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

(2)のhtmlソース

  <input class="star" type="radio" name="star2"/>
  <input class="star" type="radio" name="star2"/>
  <input class="star" type="radio" name="star2" checked="checked"/>
  <input class="star" type="radio" name="star2"/>
  <input class="star" type="radio" name="star2"/>

(3)のhtmlソース

  <input class="star" type="radio" name="star3" disabled="disabled"/>
  <input class="star" type="radio" name="star3" disabled="disabled"/>
  <input class="star" type="radio" name="star3" checked="checked" disabled="disabled"/>
  <input class="star" type="radio" name="star3" disabled="disabled"/>
  <input class="star" type="radio" name="star3" disabled="disabled"/>

 

戻るボタン