728x90
반응형
* git URL : 클릭
1. 필요파일 : jquery.minicolors.css, jquery.minicolors.js, jquery.minicolors.min.js, jquery.minicolors.png
2. import
|
1
2
|
<link rel="stylesheet" href="/plugins/jquery-minicolors/jquery.minicolors.css">
<script src="/plugins/jquery-minicolors/jquery.minicolors.js"></script>
|
cs |
3. minicolors를 위한 태그 추가
|
1
|
<input type="text" name="color1" class="form-control minicolors" data-control="hue" value="#ff6161" />
|
cs |
(1) data-control 속성은 control 타입 사용시 어떤 스타일을 쓸 것인지 설정하는 것으로 hue, saturation, brightness, wheel 중 한가지 사용가능
(2) class에서 form-control은 bootstrap을 적용하고자 하는 경우 필요하므로 넣어주면 테마 적용에 용이
4. 세팅
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$('.minicolors').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(value, opacity) {
if( !value ) return;
if( opacity ) value += ', ' + opacity;
if( typeof console === 'object' ) {
console.log(value);
}
},
theme: 'bootstrap'
});
});
|
cs |
(1) class의 minicolors에 해당되는 input 태그에 minicolors plugin을 적용
(2) 컬러 변경시 console log가 거슬리면 16번 라인 주석처리
(3) bootstrap을 사용하지 않는 경우 19번 라인에 theme : 'default' 로 변경
5. jquery 코드로 색상 변경
|
1
|
$(selecter).minicolors('value', hexValue);
|
cs |
(1) hexValue 는 #ffffff 와 같은 형태
728x90
반응형