색상 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
단순하게 js를 선언하고
.demo에 스크립트만 참조하면 사용준비 완료 입니다.

해당 깃허브에서
최선 소스를 다운로드 받아보세요


마무리


정리 잘 된 플러그인


댓글을 달아 주세요