코드쓰는사람

칼라피커란 말 그대로 색상을 찍어주는 녀석을 말한다. 보통은 다이얼로그( = 대화상자 ) 형태로 띄우는데... 이게 자바스크립트로 만들려고 하면 상당한 노가다가 된다. 게다가 원한만큼 색상이 이쁘게 나오지도 않는다.

그래서 생각해낸 방법이 플래시를 이용하는 거다. 플래시를 이용하게 되면 색상도 잘 나올뿐더러 그 자체가 오브젝트이기 때문에 셀렉트 박스등에 가려지는 일이 없어서 더욱 좋다. 한마디로 원츄~ +_+ b

사용법을 알아보자.
제일 먼저 할 일은 당연히 스크립트를 문서에 포함시키는 것이다. 칼라피커의 특성상 다중 실행을 하는 일은 별로 없으므로, 포함한 후에 바로 사용할 수 있다. 스크립트를 포함한 후에는, 몇가지 설정을 해줘야 할 것이 있는데 다음과 같다.


ColorPicker.path = 'ColorPicker.swf'; // 칼라피커 플래시 파일의 경로
ColorPicker.align = 'right'; // 칼라피커가 나타날 위치
ColorPicker.handler = userFunc; // 기본 핸들러


• align에는 left, right, top, middle, bottom 의 값이 가능하다. 각각 어떤 모양을 나타내는지는 직접 실행해보고 알도록 한다.
• 핸들러는 함수를 먼저 지정한 후 대입한다. 위의 예에서는 미리 userFunc 함수가 지정되어있다고 가정한다.

핸들러 함수는 첫번째 전달값을 반드시 가지고 있어야 한다. 첫번째 전달자에 전달되는 값은 '#'를 포함한 16진수 RGB 색상코드이다.
이제 필요한 곳에 버튼 등을 만들어서 onclick 등의 이벤트에 함수를 할당해서 칼라피커를 보여주도록 한다.



ColorPicker 객체와 show 메소드의 대소문자 사용을 주의하자. show 메소드의 첫번째 전달값은 반드시 this 가 되도록 하고, 두번째 전달값은 핸들러를 지정한다. 만일 핸들러를 지정하지 않고 사용하면 위에서 설정한 기본 핸들러가 지정되고, 기본 핸들러도 설정되어있지 않다면 빈 함수를 지정한다.


이렇게 하면 기본 핸들러가 사용된다.


사용예제

// settings
ColorPicker.path = 'ColorPicker.swf';
ColorPicker.align = 'right'; // ( left, right, middle, top, bottom)
ColorPicker.handler = userFunc; // default handler

// user custom handler
function userFunc(str)
{
document.getElementById("color").value = str;
window.status = "선택한 색상은 '" + str + "' 입니다.";
}

[#NOBR_START#]


색상 선택1 :

색상 선택2 :

[#NOBR_END#]

저작권
따로 라이센스라고 할만한 것은 없지만, 자바스크립트 소스내에 있는 저작자에 관한 짧은 주석을 삭제하지 않았으면 한다.

[##_1C|415722.zip||클릭하면 다운로드~ _##]