５ツ星の評価を付けるのに超便利なjQuery raty

version2.5.2を使います。(2013/9/24現在)

◆プログラム一式をダウンロードしてくる
http://wbotelhos.com/raty/

◆まずはjsファイルの設置
Rails3ではデフォルトで
assets/javascripts/application.jsの
//= require jquery
というコメントみたいな記述でjqueryがRequireされています。

なのであとは jquery.raty.js を、 vendor/asset/javascripts/ に設置。
呼び出したいビューの中で<%= javascript_include_tag 'jquery.raty' %> とjquery.raty.jsファイルを呼び出します。

◆画像ファイルの設置
star-half-big.png
star-off-big.png
star-on-big.png
が使いたかったので、http://wbotelhos.com/raty/ のサイト内からダウンロードしてきました。

これをすべて assets/images/ へ。
ファイルパスはビューの中で <%= asset_path('star-half-big.png') %> で呼び出せます。

◆ビューで呼び出し
3.5とか星半分の評価も欲しかったので、halfをtrueにしています。

  <script type="text/javascript">
  <!--
  $(function(){
    $('#star_rank').raty({
      half     : true,
      size     : 24,
      starHalf : '<%= asset_path('star-half-big.png') %>',
      starOff  : '<%= asset_path('star-off-big.png') %>',
      starOn   : '<%= asset_path('star-on-big.png') %>',
      target    : '#hint',
      targetType: 'number',
      targetKeep: true,
    click: function(score, evt) {
//	      alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt); //選択時に要素をアラート
      $("#star_rank_score").val(score);
    }
  });
  });
  //-->
  </script>
<div id="star_rank"></div><div id="hint"></div>
<%= f.hidden_field :star_rank_score %>

とりあえずこれをどこかしらに突っ込みます。
jsはに書き込まなくても、内に直書きで動きますので。
あとで綺麗に直します。

ページを表示して

<div id="star_rank"></div>

のところ星が表示されればOK。

<div id="hint"></div>

のところにはクリックした時のスコアが数字で入ります。

javascript中に

$("#star_rank_score").val(score);

があるので、hidden_fieldのフォーム要素（idがstar_rank_score）のvalueにも入れられます！

難しいかなって思ってたのに感動しましたー＞＜