Ruby好き非エンジニアのブログ

〜Ruby on Railsの学習記録〜

5段階評価のレビュー機能を実装。〜ratyの導入〜

今回はレビュー機能
5段階の評価を実装できるratyというプラグインについてメモ。

まずはこちらのgithubページにアスセス。
GitHub - wbotelhos/raty: :star2: jQuery Raty - A Star Rating Plugin


f:id:Jyoko:20170604152139g:plain
上記のように、画面右側にある「Clone or download」のプルダウンを選択し、「Download ZIP」をクリックしてコードをダウンロードします。

ダウンロードをしたら、解凍したファイルを、
demo>imagesの順に開き、
f:id:Jyoko:20170604143816g:plain
この星形のものを3つコピーしてみます。
そして、app>assets>images等、画像を保存してあるフォルダに貼り付けします。


続いて、再度先ほど解凍したratyフォルダに戻り、
libフォルダを開いて、この中のjquery.raty.jsをコピー。
f:id:Jyoko:20170604144316g:plain

そして画像の時と同様、
app>assets>javascripts等のjavascriptが入っているフォルダに貼り付けします。

あとは同githubページのUsageあたりを参考に、f:id:Jyoko:20170604145227g:plain

<div id="stars"></div>
.
.
<script type="text/javascript">
  $("stars").raty({
  	path: '/assets',
  });
</script>

などと表示するとスターマークが表示されるようになります。

f:id:Jyoko:20170604151827g:plain

マウスオーバーで簡単にレビューができてUIもいい感じ。
これだけではまだ使い物になりませんが。。

下記のようにオプションがたくさんあるようなので、いろいろと試してみたいと思います。
f:id:Jyoko:20170604151931g:plain


ということで、今日はこの辺で。