IT/PLUGIN

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

Alo_alex 2022. 6. 2. 17:45

# 목차

  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

8c) SVG icons Since SVG can be set as a background image (either through setting the URL to an svg file or by using the Data URI scheme), we can use it as an image inside our RateIt plugin. This could allow us even to create the image on the fly, by render

gjunge.github.io

 

 

 

 

 

 

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>
반응형