[Plugin] Rateit.js 란, 그리고 옵션

# 목차

1. 사용목적
2. Rateit.js 란?
3. 플러그인 홈페이지
4. 사용을 위한 설치
5. 사용을 위한 설정(css, js)
6. 사용을 위한 레이아웃 구축(html)
7. 결과
8. 주로 사용하는 옵션

---

1. 사용목적

별점주기 같은 호감도 수치를 체크하는 ui에 사용

 

 

 

 

 

2. Rateit.js란?

'Rateit.js'는 별점 체크 하는 ui를 좀더 효과적으로 사용할 수 있게 제공하는, 제이쿼리 기반의 플러그인이다.

RTL(오른쪽에서 왼쪽으로)읽기를 위해 방향지원도 하고 있다. 

 

 

 

 

 

3. 플러그인 홈페이지

해당 홈페이지에서 'Rateit.js' 플러그인을 사용하는 방법, 예제 등을 확인할 수 있다.

http://gjunge.github.io/rateit.js/examples/

Rateit.js by gjunge

 

 

 

 

 

 

4. 사용을 위한 설치

해당 플러그인을 사용하기 위해선 설치가 필요하다.

(해당 플러그인은 제이쿼리 기반이기 때문에 반드시 제이쿼리를 먼저 설치해 줄것)

설치의 대한 방법은 CDN이 없는 총 2가지로 되어 있으며, 각자 필요에 맞는 방법으로 설치 할 수 있도록 한다.

(필자는 사용시 '2. Download assets'을 주로 사용하였다.)

   1. Install from NPM : 'NPM' 으로 인스톨

   2. Download assets : 플러그인 파일을 다운로드하여 프로젝트 내 배치

 

 

 

 

 

5. 사용을 위한 설정(css, js)

'Rateit js' 의 'Examples' 영역에 있는 소스로 테스트 해보도록 한다.

[Installation] Rateit js를 필요에 맞는 방법으로 인스톨 한다

- Install from NPM

// install Rateit JS
npm install jquery
npm install jquery.rateit

'4번 사용을 위한 설치' 에서 언급했다 싶이 제이쿼리 기반이기 때문에,
반드시 제이쿼리를 인스톨 해주고, 플러그인을 인스톨 한다.

 

 

 

- Download assets

페이지 상단 부에 있는, 'Rateit.js' 하단에 있는 3가지 방식중 하나를 클릭해 파일을 다운받는다.

<link
  rel="stylesheet"
  href="내 프로젝트 경로/rateit.css"
/>

<script src="내 프로젝트 경로/jquery.rateit.js"></script>

 

 

 

 

 

6. 사용을 위한 레이아웃 구축(html)

[Initialize via HTML] html로 레이아웃을 설정

<span class="rateit"></span>

기본형으로 사용할 경우 클래스명('rateit')만 작성하며, 다른 인라인 옵션을 줄 수 있다.

 

 

 

 

 

7. 결과

기본형으로 사용할 경우 js는 따로 설정하지 않아도 되며, 커스터마이징 할 경우 설정하도록 한다.

 

 

! 결과화면 확인 !

 

 

 

 

 

8. 주로 사용하는 옵션

기본형으로 사용할 경우 js는 따로 설정하지 않아도 되며, 커스터마이징 할 경우 설정하도록 한다.

 

// inline 선언 attr
<div
    class="rateit"                  // 플러그인 불러올 클래스 설정
    data-rateit-value="5"           // 디폴트로 보여줄 별 값
    data-rateit-ispreset="true"     // 데이터 전송여부
    data-rateit-min="0"             // 최소 보여줄 별
    data-rateit-max="5"             // 최대 보여줄 별
    data-rateit-starwidth="48"      // 별모양 넓이
    data-rateit-starheight="40"     // 별모양 높이
>
</div>