홈페이지 개발에서 색상 선택기를 만들어 붙여야 할 일이 드물기는 하지만 언제가는 필요할 때가 있으므로 jQuery 플러그인을 가져다가 입맛에 맞는 ColorPicker 를 만들어봅시다. 검색해본 여러가지 ColorPicker 플러그인 중에 이 것(http://www.eyecon.ro/colorpicker/)이 쓸만해 보여서 약간 불편한 부분과 IE6에서 화면이 깨지는 부분을 수정한 후 예제를 만들어 봤습니다. 아래는 색상 선택기 예제 실행 화면이고 하단에는 예제 소스 코드입니다.
[jQuery 색상 선택기 (ColorPicker) 예제 실행 화면]
http://www.hompydesign.com/javascript/colorpicker/
[jQuery 색상 선택기 (ColorPicker) 예제 소스 코드]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/588
(0) 
(0)
[jQuery 색상 선택기 (ColorPicker) 예제 실행 화면]
http://www.hompydesign.com/javascript/colorpicker/
[jQuery 색상 선택기 (ColorPicker) 예제 소스 코드]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Color Picker</TITLE>
<link rel="stylesheet" href="./colorpicker.css" type="text/css" />
<link rel="stylesheet" href="./index.css" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="./colorpicker.js"></script>
<script>
$(document).ready(function(){
$('#colorpicker_0,#colorpicker_1,#colorpicker_2,#colorpicker_3,#colorpicker_4').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
check_colorpicker(el, hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
},
onChange: function (hsb, hex, rgb, el) {
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
$('.colorpicker_holder').each(function(){
var el = $(this).parent().find("input");
var color = el.val().toUpperCase();
el.val(color);
$(this).css("backgroundColor", "#"+color );
$(this).click(function(){
$(this).parent().find("input").ColorPickerShow();
});
});
});
function check_colorpicker(el, hex){
$(el).val(hex.toUpperCase());
$(el).ColorPickerHide();
$(el).parent().parent().find(".colorpicker_holder").css('backgroundColor', '#' + hex);
var pos = el.id;
}
</script>
</HEAD>
<BODY>
...
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Color Picker</TITLE>
<link rel="stylesheet" href="./colorpicker.css" type="text/css" />
<link rel="stylesheet" href="./index.css" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="./colorpicker.js"></script>
<script>
$(document).ready(function(){
$('#colorpicker_0,#colorpicker_1,#colorpicker_2,#colorpicker_3,#colorpicker_4').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
check_colorpicker(el, hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
},
onChange: function (hsb, hex, rgb, el) {
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
$('.colorpicker_holder').each(function(){
var el = $(this).parent().find("input");
var color = el.val().toUpperCase();
el.val(color);
$(this).css("backgroundColor", "#"+color );
$(this).click(function(){
$(this).parent().find("input").ColorPickerShow();
});
});
});
function check_colorpicker(el, hex){
$(el).val(hex.toUpperCase());
$(el).ColorPickerHide();
$(el).parent().parent().find(".colorpicker_holder").css('backgroundColor', '#' + hex);
var pos = el.id;
}
</script>
</HEAD>
<BODY>
...
</BODY>
</HTML>
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/588
(0) (0)