색상 RGB input 선택 plugin
안녕하세요.
고코더 입니다.
웹사이트에서
사용자에게 색상코드를 선택 값을 받을 때
input 박스로 받는 거보다 조금 더 우아하게
받을 수 있는 플러그인을 하나 소개하려고 합니다.
▼ 바로 jquery 미니 컬러 입니다.
플러그인 .js 몇가지를 첨부 한 후에
속성만 주면 간단하게
input 박스를 컬러 코드를 선택 할 수 있는
기능으로 만들어 줍니다.
▼데모를 보면 이미 다양한 패턴의 예제를 만들어 났고
그대로 복사해서 붙혀넣어 쓰기 편하게 되어 있습니다.
색상코드 관련힌 인픗박스 기능은 전부 있어 보입니다.
▼ 필요한 부분만 남겨두고
축소 해보았습니다.
더 쉽게 이해가 가능한 소스라고 생각 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.minicolors.js"></script> <link rel="stylesheet" href="jquery.minicolors.css"> <script> $(document).ready( function() { $('.demo').each( function() { $(this).minicolors({ control: $(this).attr('data-control') || 'hue', defaultValue: $(this).attr('data-defaultValue') || '', format: $(this).attr('data-format') || 'hex', keywords: $(this).attr('data-keywords') || '', inline: $(this).attr('data-inline') === 'true', letterCase: $(this).attr('data-letterCase') || 'lowercase', opacity: $(this).attr('data-opacity'), position: $(this).attr('data-position') || 'bottom', swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [], change: function(hex, opacity) { var log; try { log = hex ? hex : 'transparent'; if( opacity ) log += ', ' + opacity; console.log(log); } catch(e) {} }, theme: 'default' }); }); }); </script> </head> <body> <input type="text" id="hue-demo" class="demo" data-control="hue" value="#ff6161"> </body> </html> | cs |
gocoder_minicolor.html단순하게 js를 선언하고
.demo에 스크립트만 참조하면 사용준비 완료 입니다.
해당 깃허브에서
최선 소스를 다운로드 받아보세요
Color-Picker-Plugin-jQuery-MiniColors.zip마무리
정리 잘 된 플러그인
'IT_Developers > Javascript' 카테고리의 다른 글
| JavaScript- 타이핑 애니메이션 / typewriterjs (7) | 2019.03.21 |
|---|---|
| jQuery - 선택 요소 사이즈 재조정 / resizeble() (0) | 2019.03.14 |
| JavaScript - 자바스크립트 파라미터 받아오기 / location.search (0) | 2019.03.08 |
| JavaScript - .js 안에서 jquery 사용하는 방법 (0) | 2019.03.08 |
| JavaScript - .js? 파라미터 값 사용 방법 (0) | 2019.03.08 |
댓글