[jquery] 별점주기 기능 구현

내서재 사이트를 개발하면서 별점주기 기능이 필요해서 이것저것 찾아보다가 해당 플러그인이 쓰기 편하고 기본기능에 충실해서 사용했습니다. 여기서는 기능 구현을 소개합니다. 

해당 플러그인은 jquery v1.7.2 버전 이상에서 작동합니다.

사이트: https://github.com/antennaio/jquery-bar-rating

다운받은 파일의 압축을 풀어 다음 폴더의 js 파일을 프로젝트에 복사합니다.
[다운받은폴더]/jquery-bar-rating-master/dist/jquery.barrating.min.js

사용하고 싶은 디자인에 맞춰 css파일을 가져와야 하는데, 모두 다 쓸거라면 전부 복사하면 됩니다.
별점만 하고 싶으면 fontawesome-stars.css 파일만 있으면 됩니다.
[다운받은폴더]/jquery-bar-rating-master/dist/themes/fontawesome-stars.css

그리고 추가로 CDN에서 Font Awesome 아이콘을 가져와야 합니다. 
그래서 총 3개를 추가하면 됩니다.

<!-- bar-rating -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="/[경로]/fontawesome-stars.css">
<script type="text/javascript" src="/[경로]/jquery.barrating.min.js"></script>

html 을 추가하고 script 를 다음과 같이 구성합니다

<select id="example">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>

<script type="text/javascript">
   $(function() {
      $('#example').barrating({
        theme: 'fontawesome-stars'
      });
   });
</script>

자주 사용되는 메서드만 다루겠습니다.

- 플러그인 적용시 기본값을 3으로 설정

$('#example').barrating({
	theme: 'fontawesome-stars'
	, initialRating: 3
});

- 읽기 전용

$('#example').barrating({
	theme: 'fontawesome-stars'
	, readonly: true
});

- 선택한 후 처리

$('#example').barrating({
	theme: 'fontawesome-stars'
	, onSelect: function(value, text, event){
		// 별점 클릭 후 처리는 여기서 코드
		// 선택한 별점 값을 value로 받음
	}
});

- 플러그인 적용 후, 별점 값을 스크립트로 제어할 때

// 'set' 을 이용하여 값 설정
$('#example').barrating('set', 2);