[JS+Flash] 플래시 칼라피커

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

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

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


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




align에는 left, right, top, middle, bottom 의 값이 가능하다. 각각 어떤 모양을 나타내는지는 직접 실행해보고 알도록 한다.

핸들러는 함수를 먼저 지정한 후 대입한다. 위의 예에서는 미리 userFunc 함수가 지정되어있다고 가정한다.


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

<input type="text" id="color" size="8" onclick="ColorPicker.show(this, userFunc)" />

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

<input type="text" id="color" size="8" onclick="ColorPicker.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 + "' 입니다.";
}

색상 선택1 : 
색상 선택2 : 

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