MiniColors
색상 코드를 선택할 수 있는 JQuery MiniColors 의 사용법을 소개합니다.
jQuery MiniColors
labs.abeautifulsite.net
위 사이트에 들어가면 다운로드 및 예제를 보실 수 있습니다.
사용법
먼저 다음 파일을 구합니다.
jquery.min.js
jquery.minicolors.min.js
jquery.minicolors.css
예제에 보면 절차가 나와있지만 좀더 쉽게 해보겠습니다.
F12 를 눌러서 개발자 도구를 열어 소스를 봅니다.
head 부분에 다음과 같이 스크립트를 긁어옵니다.
선택하실 수 있는 괜찮은 옵션입니다.
data-control : hue / wheel / saturation
data-format : hex / rgb
thema : default / bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./jquery.minicolors.css">
<script src="./jquery.min.js"></script>
<script src="./jquery.minicolors.min.js"></script>
<script>
$(document).ready( function() {
$('.demo').each( function() {
$(this).minicolors({
control: $(this).attr('data-control') || 'hua',
defaultValue: $(this).attr('data-defaultValue') || '',
format: $(this).attr('data-format') || 'rgb',
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="rgb" class="form-control demo minicolors-input" data-format="rgb" value="rgb(33, 147, 58)" size="20">
</body>
</html>
근데 잘보시면 스크롤바에 이미지가 없습니다.
다시 개발자 도구로 가서 Source에 이미지 파일을 다운받아서 같은 경로에 넣어줍니다.
(Github에 있을 거 같은데 에러가 나서 안들어가지므로)
확인해봅니다.
bootstrap 을 사용하실 분은 다음과 같이.
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
'Language > Javascript' 카테고리의 다른 글
| Summernote 사용하기 (0) | 2020.08.03 |
|---|---|
| 네이버 SmartEditor2 사용하기 (0) | 2020.08.03 |
| jQuery highcharts 를 이용한 실시간 그래프 그리기 (3) | 2020.07.28 |
| jQuery Highcharts 를 이용한 그래프 그리기 -1 (0) | 2020.07.28 |
| jQuery Ajax 다루기 -1 : GET / POST (1) | 2020.07.28 |
