【raty.js】 별 첨부 평가 기능 실장 rails view 표시까지



【골】



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>

이상

좋은 웹페이지 즐겨찾기