jQuery rateYo 별점

jQuery rateYo 별점

안녕하세요 TriplexLab입니다 :)

오늘은 별점 매기는 플러그인 jQuery rateYo에 대해서
간단하게 소개하겠습니다.

rateYo 별점 설명

rateYo은 이것 jQuery 기반의 플러그인입니다.
jQuery가 먼저 로딩한 후에 rateYo가 로딩되어야 합니다.

RateYo!, A jQuery Star Rating Plugin

공식 사이트에서 기본적인 사용 방법익 익히시면 될 것 같습니다.

난히도가 딱히 어렵진 않습니다.

저는 이것을 이용해서 
제가 설정한 값대로 뿌리는 연습을 해보겠습니다.

rateYo 별점 코드

 <div id="productDataDetails">
      <div>
        <div class='rateYoa' data-rateyo-rating='0' data-rateyo-score='4' data-rateyo-num-stars="5"></div>
      </div>
</div>
<button id="add">add</button>

 

$(function () {
	let rating; // 1)에서 값을 추출한 것을 이곳에 저장합니다. 2)

	const docctemplate = function() {
		let template = '';
        template += '<div>';
        template += '<div class="rate" data-rateyo-rating="'+rating+'"></div>';  // 2)에서 저장한값을 이곳에 넣어줍니다. 3)
       	template += '</div>';
        return template;
    }
    $("#add").on("click", function() {
        $('#productDataDetails').append(docctemplate);
        $(".rate").rateYo({ // 3)에서 설정해놓은 .rate에 또 다시 rateYo를 설정해줍니다. 4)
          readOnly: true // 등급을 편집 할 수 없도록하려면 readOnly : true로 설정하십시오
        })
      });

      // 첫 렌더링후 기본으로 등급 별점을 체이진후하여 값을 추출합니다. 1)
      $(".rateYoa").rateYo({
        rating: 1,
        fullStar: true // 등급이 1 단계로 표시됩니다. 
      }).on("rateyo.change", function(e, data) {
        rating = data.rating;
      });
});

 

결과) 

공식 사이트에서 #fullStar, #readOnly 와 같이 검색해보시면 해당 옵션에 대해서 설명서를 찾을수 있습니다.

위에 코드를 파일로 제공합니다 :)
필요한 분들은 다운받아서 연습해보세요~

rateYo_js.zip

0.04MB