웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 4102
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 : 4102
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 Work IT Information Web Identity Work Everyday Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
모바일 플래시 컬러 솔루션 게티이미지코리아 폰트 애니메이션 고딕 삼성 프린터 프로젝트매니저 대쉬보드 스티브 잡스 의사결정 리더십 블로그 나눔바른고딕 로고 모바일 아이폰 아이폰 무료 디자인 디자인 온라인광고 IT 습관 라이센스 플랫 앱 디자인 웹 접근성 로고디자인 트렌드 CSS 플래시 통제 기획자 Flash