[ jQuery ] 컬러피커 플러그인 minicolors

jQuery에 컬러피커를 지원해주는게 있어 포스팅해본다.

 

깃허브 - https://github.com/claviska/jquery-minicolors

참고 - https://labs.abeautifulsite.net/jquery-minicolors/#instantiation

깃허브에서 zip파일을 받아 압축을 풀어 여느 플러그인처럼 

자바스크립트 min파일과 스타일시트 min을 넣어줬더니...

 

이렇게 나온다...

컬러피커의 색상이 제대로 표시되지 않는다 ㅠㅠ...

아니 다들 스크립트랑 스타일시트만 넣어주더만 왜 나한테만 이러는거야?

했더니 안되는데엔 다 이유가 있는 것이여라^-^;;

 

콘솔 에러와 폴더를 다시보니 이미지 하나를 못 불러오는 듯 했다.

폴더에 보면 jquery.minicolors.png 라는 이미지 파일이 하나 있다.

해당 이미지를 넣어주어야한다.

 

해당 이미지의 경로는 "jquery.minicolors.css"에 상단을 보면 해당 코드가 있다.

.minicolors-sprite {
  background-image: url(jquery.minicolors.png);
}

url에서 이미지의 경로를 수정해주면 정상적으로 나타날 것이다 :)

 

사용방법은 참고 사이트의 설명을 참조바란다.

나는 옵션을 사용하지 않아도 되서 단순히 아래와 같이 작성했다.

$('.color').minicolors({});

---

- 끝 -