↓もし、良かったらSNSでの紹介よろしくお願いします。

Railsで星5レーティング機能の実装、jQuery Ratyがメジャー?

bootstrap

jQuery Raty Plugin

今回は星5レーティングを実装します。
調べてみるとjQuery Raty Pluginがメジャーなのでこれで実装していきます。

RailsアプリにjQuery Raty Pluginをインストール

ダウンロード

gitがインストールされている場合は下記のコマンドを実行してソースをダウンロードしましょう。
git が入っていない場合、こちらからソースをダウンロードしましょう。

git clone https://github.com/wbotelhos/raty.git

インストール

  • lib/jquery.raty.jsをRailsアプリのapp/assets/javascripts/にコピー
  • lib/images/のすべて画像をRailsアプリのapp/assets/imagesにコピー
  • app/assets/javascripts/application.jsに下記の2行を追加
//= require jquery
//= require jquery.raty

使い方

入力欄を隠しフィールドで書く。(idを設定しておくと楽)

<%= form.hidden_field :rating, id: :book_rating %>

星を表示したい位置に下記のソースを挿入

<div id='star-rating'></div>

ビューファイルの下部に下記のコードを書き込む。
これは星がクリックされたときに入力欄の値を書き換えるコードです。
入力欄はid(book_rating)で選択しています。

<script>
$('#star-rating').raty({
path: '/assets/',
click: function(score, e) {
$("#book_rating").val(score)
}
});
</script>

↓もし、良かったらSNSでの紹介よろしくお願いします。

フォローする