More than 3 years have passed since last update.

【raty.js】星付き　評価機能　実装　rails　view表示まで

Last updated at 2020-05-03Posted at 2020-05-03

##【ゴール】
raty.jsを使用して星付きのランキング機能の実装　view表示まで

##【メリット】
■　UXの向上
■　javascript理解度向上

##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

##【実装】

###1.githubからretyのソースを持ってくる
　※こちらのソースコードから
　※ファイルは2点、①"jquey-raty.js"のファイル　,　②"image"全て

###2.jquery追記
　※　”//= require jquery”を追記しないと読み込まれません
　※　"star"　に対して発火するよう定義
　※　”/assets/star-off.png"で画像の場所を指定

javascripts/application.js

//= require jquery  

　　　（中略）

$(function () {
  $('#star').raty({　　　
    size: 36,
    starOff: "/assets/star-off.png",
    starOn: "/assets/star-on.png",
    scoreName: "score"
  });
});

###3.view追記
　※　””ファイルを読み込む
　※　"id=star"で上記のJavaScriptの記述へ情報を渡してあげる

views/application.html.erb

<body>
  <script src="assets/jquery.raty.js"></script>
  <div id="star"></div>
  <%= yield %>
</body>

以上

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【raty.js】 星付き 評価機能 実装 rails view表示まで

【raty.js】星付き　評価機能　実装　rails　view表示まで