'웹 프로그래밍'에 해당되는 글 43건

  1. 2009/10/10 홈피에 자바스크립트로 만든 색상선택기(ColorPicker) 붙여보기. (6)
  2. 2009/07/05 시계 가젯을 만들어 보고 구글과 블로그에 띄워보자!
  3. 2009/06/26 야후 세계 지도 활용하기, 야후 거기 지도 오픈 API 매시업 (1)
  4. 2009/06/25 다음 지도를 내 것으로 만들기, 다음 지도 API 매쉬업 (2)
  5. 2009/06/24 나만의 네이버 지도 만들기, 지도 API 매쉬업(Mashup) (4)
  6. 2009/06/21 자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup) (8)
  7. 2009/06/07 jQuery 로 텍스트 입력 박스(TextArea)에 크기 조절 막대 추가하기. (1)
  8. 2009/06/06 PHP 시간 관련 함수를 써서 시간 차이 계산하기, DATEDIFF (2)
  9. 2009/03/22 jQuery 애니메이트로 만들어보는 이미지 슬라이더와 전광판 (1)
  10. 2009/03/09 jQuery를 활용한 홈페이지 개발의 기본인 입력폼 제작 (6)
  11. 2009/01/27 jQuery UI로 달력과 날짜입력기(DatePicker)를 붙여보기.
  12. 2009/01/26 PHP 또는 자바스크립트로 달력 만들기 소스 코드 (5)
  13. 2009/01/20 스핑크스 검색엔진으로 내 블로그 검색 성능을 높이자.
  14. 2009/01/18 웹 기반의 WYSIWYG 에디터, FCKeditor를 사용해보자.
  15. 2009/01/17 엑셀 문서 파일을 데이타베이스에 업로드 하는 PHP 소스 코드 (1)
  16. 2009/01/04 동적 HTML 객체 모델 요소의 위치와 면적 계산
  17. 2009/01/04 자바스크립트, 객체의 속성과 메소드와 이벤트 핸들러
  18. 2009/01/04 HTML과 자바스크립트에서 스타일시트 속성 (2)
  19. 2009/01/03 자바스크립트, 모서리가 둥근 테이블 만들기.
  20. 2008/12/16 이미지 썸네일을 생성하는 PHP 함수 소스 코드 (2)
  21. 2008/12/06 내 블로그 검색에 오픈 소스 검색엔진을 붙여보자! (1)
  22. 2008/10/15 자바스크립트 복수 게시물 더보기/접기(more/less) 소스 (6)
  23. 2008/09/30 자바스크립트로 아날로그 시계 만들기 (1)
  24. 2008/09/27 클립보드 복사 기능 구현을 위한 소스 코드 (1)
  25. 2008/09/16 홈페이지 동시접속자수 구현을 위한 PHP 소스 코드 (3)
  26. 2008/06/26 미리보기 이미지 썸네일 만들기 함수 PHP 소스 코드 (1)
  27. 2008/05/20 공개보드 게시물을 텍스트큐브 또는 태터툴즈로 복사하기. (1)
  28. 2008/05/16 PHP로 첨부파일이 있는 이메일 보내기 샘플 소스 코드 (1)
  29. 2008/05/15 삽질할 수 있는 PHP로 이메일 보내기 샘플 소스 코드
  30. 2008/03/26 자바스크립트 createElement, insertBefore, replaceChild, appendChild (1)
◀ 이전페이지 1 2 다음페이지 ▶

홈피에 자바스크립트로 만든 색상선택기(ColorPicker) 붙여보기.

웹 프로그래밍 2009/10/10 22:49
TAG , , , , , , , , ,
홈페이지 개발에서 색상 선택기를 만들어 붙여야 할 일이 드물기는 하지만 언제가는 필요할 때가 있으므로 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>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/588
2009/10/10 22:49 2009/10/10 22:49
No Trackback, 댓글 6개가 달렸습니다.

댓글을 달아 주세요

  1. 이창희 2010/08/10 19:23  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다~~~

  2. 포토샵이라면.. 2010/01/26 11:59  댓글주소  수정/삭제  댓글쓰기

    포토샵이라면 모든지 좋아요^^

  3. 노랑우산 2010/01/26 10:03  댓글주소  수정/삭제  댓글쓰기

    넘좋아요

  4. 비밀방문자 2010/01/22 15:25  댓글주소  수정/삭제  댓글쓰기

    관리자만 볼 수 있는 댓글입니다.

  5. 하얀방울 2009/10/15 11:14  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다. 담아갈께요.

  6. 김규진 2009/10/14 16:11  댓글주소  수정/삭제  댓글쓰기

    와 좋은데요

◀ 이전페이지 1 2 다음페이지 ▶