jQuery color picker 사용법

제이쿼리로 color picker를 사용해야 할 일이 생겼다.

 

들이는 수고에 비해서, 뭔가 예쁜 느낌이라 좋은 것 같다.

 

실용성은 상황에 따라 다르겠지만..

 

 

일단 화면부터

 

 

몇 개의 <input> form이 있는데, 그 중 하나이다.

 

해당 폼에 커서를 클릭하면 colorPicker가 생성된다.

 

색을 마우스를 드래그 하여 선택하게 되면, 폼 안의 값도 따라 바뀌게 된다.

 

가장 마음에 들었던 것은, 'fsdfs' 혹은 '5643221'와 같은 이상한 값들을 알아서 걸러준다.

 

 

해당 파일은 링크에서 다운 받을 수 있다.

- https://itsjavi.com/bootstrap-colorpicker/

 

이 외에도 다양한 colorpicker들은 쉽게 검색이 가능하다.

 

그럼, 먼저 구성을 보면

 

 

이런식으로 되어있으니, 폴더 구조에 맞게 스크립트를 작성하고..

 

<script type="text/javascript" src='/js/colorPicker/js/bootstrap-colorpicker.js'></script> <script type="text/javascript" src='/js/colorPicker/js/bootstrap-colorpicker.min.js'></script> <link href="/js/colorPicker/css/bootstrap-colorpicker.css" rel="stylesheet" type="text/css"> <link href="/js/colorPicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" type="text/css">

 

function cp() { $('.colorPicker').colorpicker({ format: "hex" }); }

 

이렇게 간단하게 지정만 해주면,

 

<input type="text" class="form-control colorPicker" name="bgColor">

완료!

해당 API들은 위 링크에 들어가면 쉽게 참고할 수 있게끔 정리되어있다.