티스토리 뷰
제이쿼리로 color picker를 사용해야 할 일이 생겼다.
들이는 수고에 비해서, 뭔가 예쁜 느낌이라 좋은 것 같다.
실용성은 상황에 따라 다르겠지만..
일단 화면부터
몇 개의 <input> form이 있는데, 그 중 하나이다.
해당 폼에 커서를 클릭하면 colorPicker가 생성된다.
색을 마우스를 드래그 하여 선택하게 되면, 폼 안의 값도 따라 바뀌게 된다.
가장 마음에 들었던 것은, 'fsdfs' 혹은 '5643221'와 같은 이상한 값들을 알아서 걸러준다.
해당 파일은 링크에서 다운 받을 수 있다.
- https://itsjavi.com/bootstrap-colorpicker/
이 외에도 다양한 colorpicker들은 쉽게 검색이 가능하다.
그럼, 먼저 구성을 보면
이런식으로 되어있으니, 폴더 구조에 맞게 스크립트를 작성하고..
1 2 3 4 | <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" > |
1 2 3 4 5 | function cp() { $( '.colorPicker' ).colorpicker({ format: "hex" }); } |
이렇게 간단하게 지정만 해주면,
1 | <input type= "text" class = "form-control colorPicker" name= "bgColor" > |
완료!
해당 API들은 위 링크에 들어가면 쉽게 참고할 수 있게끔 정리되어있다.
'JavaScript & jQuery' 카테고리의 다른 글
jqGrid 리스트 출력 (1) | 2017.02.14 |
---|---|
mouseover, mouseout, mouseenter, mouseleave 차이점 (0) | 2016.11.14 |
Ajax 채팅, setInterval() (1) | 2016.11.14 |
ajax 파일 업로드 - Multipartparser (0) | 2016.10.12 |
button 추가 생성 후, 삭제 안될 때 (0) | 2016.10.12 |
최근에 올라온 글
최근에 달린 댓글
TAG
- InputStream
- CDN
- mouseenter
- excel file download
- fmt
- setInterval
- mouseout
- 프로시저
- multipart/form-data
- popup
- poi
- bootstrap
- OutputStream
- Spring
- return
- JQuery
- mouseover
- ssl
- mouseleave
- Each
- mybatis
- jquery filedownload
- trim
- c:foreach
- opener
- 인코딩
- ColorPicker
- 제이쿼리
- httpurlconnection
- jqGrid
- Total
- Today
- Yesterday