웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



GUESTROOM
Practical Use Tip
HOME GUESTROOM Practical use Tip
홈피에 자바스크립트로 만든 색상선택기(ColorPicker) 붙여보기
Posted by kimdirector | 2009.10.16 | Hit : 4011
jQuery ColorPicker
목록보기이전보기

홈페이지 개발에서 색상 선택기를 만들어 붙여야 할 일이 드물기는 하지만 언제가는 필요할 때가 있으므로 jQuery 플러그인을 가져다가 입맛에 맞는 ColorPicker 를 만들어봅시다. 검색해본 여러가지 ColorPicker 플러그인 중에 이 것(http://www.eyecon.ro/colorpicker/)이 쓸만해 보여서 약간 불편한 부분과 IE6에서 화면이 깨지는 부분을 수정한 후 예제를 만들어 봤습니다. 아래는 색상 선택기 예제 실행 화면이고 하단에는 예제 소스 코드입니다.

[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>

Posted by kimdirector | 2009.10.16 | Hit : 4011
Origin http://hompy.info/588
Tags jQuery ColorPicker
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=WebdesignTip&no=157

COMMENT
목록보기 이전보기
GUESTROOM
Leaders Story
Download Review
Practical Use Tip
IT Information & News
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
고객경험 오페라 기업 웹 사이트 브랜드 데이터 사용자 모바일 플랫폼 Flash 웹폰트 디자인 한글폰트 HTML5 온라인광고 기획자 홈페이지 웹디자인 코카콜라 무료 글꼴 에너지 스토리 jQuery 웹디자인 디자인 디자이너 웹진 2018년 개인화 모바일 BIP RIA 지능 프린트 마크업 차별화 솔루션 플래시 Draft 브라우저 남규리 로고디자인 어플리케이션