칼라피커란 말 그대로 색상을 찍어주는 녀석을 말한다. 보통은 다이얼로그( = 대화상자 ) 형태로 띄우는데... 이게 자바스크립트로 만들려고 하면 상당한 노가다가 된다. 게다가 원한만큼 색상이 이쁘게 나오지도 않는다.
그래서 생각해낸 방법이 플래시를 이용하는 거다. 플래시를 이용하게 되면 색상도 잘 나올뿐더러 그 자체가 오브젝트이기 때문에 셀렉트 박스등에 가려지는 일이 없어서 더욱 좋다. 한마디로 원츄~ +_+ 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||클릭하면 다운로드~ _##]
일단 여기선 처음 뵙겠습니다. ^_^
와우.. 멋지네요~~
옛날에 ddart 님이 포토샵의 컬러 선택 박스를 그대로 구현한 걸 보았는데..
이것도 상당히 괜찮네요~ 깔끔하구..
yser// 반가워요~ ^_^ /
오와 좋네요 ^^
오~스쿨에서 종종 봤지만... 고니님 홈에 들어온건 첨...^^;;
좋은 팁 많네요...감동감동... 즐겨 찾기 했습니다.
스쿨에서 보구 왔네요..
블로그가 깔끔하니 보기 좋네요....
자주 찾아오겠습니다 (북마크 했네요 ㅋㅋ)
LINE, 노랑배 // 감사합니다. 종종 들러주세요. *^^*
ColorPicker.path = '../ColorPicker.swf';
ColorPicker.align = 'right'; // ( left, right, middle, top, bottom)
ColorPicker.handler = userFunc; // default handler
ColorPicker.handler = userFunc1; // default handler
function userFunc(str)
{
document.getElementById("color").value = str;
window.status = "선택한 색상은 '" + str + "' 입니다.";
}
function userFunc1(str)
{
document.getElementById("color1").value = str;
window.status = "선택한 색상은 '" + str + "' 입니다.";
}
위와같이 한페이지에 2개이상의 text와 칼라피쳐가 들어가는경우에는 어떻게
해야하나요? 모든 소스의 파일을 여러개 만들어야하나요? 다좋은데 한페이지에
한번만 쓰면 괜찮은데 여러개를 쓰게 되면 문제가 되네요..
알려주세요.감사합니다.
제트스윙 // 제가 코드를 만들때 실수를 한 것 같습니다. 변경된 소스를 다시 다운받아서 테스트해주셨으면 합니다.
아! 그리고 ColoPicker.handler 를 두번 지정하실 필요는 없습니다. show 메소드를 호출할 때 핸들러를 따로 지정하지 않을 경우에만 사용하는 기본값이거든요. show 메소드의 두번째 전달자로 핸들러를 지정하신다면 아예 지정하지 않아도 상관없는 값입니다.
정말 굿입니다. 좋으신분이네요.
이야..굿^^
넘 멋져여 ~~