칼라피커란 말 그대로 색상을 찍어주는 녀석을 말한다. 보통은 다이얼로그( = 대화상자 ) 형태로 띄우는데... 이게 자바스크립트로 만들려고 하면 상당한 노가다가 된다. 게다가 원한만큼 색상이 이쁘게 나오지도 않는다.
그래서 생각해낸 방법이 플래시를 이용하는 거다. 플래시를 이용하게 되면 색상도 잘 나올뿐더러 그 자체가 오브젝트이기 때문에 셀렉트 박스등에 가려지는 일이 없어서 더욱 좋다. 한마디로 원츄~ +_+ 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||클릭하면 다운로드~ _##]
먼저 감사의 인사를 드립니다. 감사합니다.
저는 네이버 블로그를 홈으로 두고 있는 덜렁이라합니다. 고니님의 칼라피커를 제 폰트변환 마법사에 적용시켰습니다. 안 그래도 셀렉트 방식으로 하려니 선택의 폭이 작아 고민 하던 중 엔지오에 올려주신 이 칼라피커를 보고 적용시켰더니 정말 깔끔하고 다양 해 졌습니다. 소스 내의 주석은 그대로 뒀으며 소스 내의 사소한 아이디 하나도 바꾸지 않았습니다. 네이버 블로그에 공개 할 것이며 포스팅 할 때 포스트에 고니님의 홈페이지를 링크하려합니다. 혹여 침해 되신다면 글 남겨주십시오. 이 폰트 변환기는 이 글 아래 홈페이지란에 넣겠습니다. 봐 주시고 보안 할 게 보이면 말씀 해 주시면 더욱 감사를 드리겠습니다. 새로운 한 주가 시작되었습니다. 언제나 보람차게 보내시길 바라며 더욱 유용 한 강의 기대하겠습니다. ^^*
http://my1.moyr.net/ksook00/Blog/Fonter.htm
부모창 제어 방식으로 링크시켜 아이디 란에 넣었습니다.
덜렁이 // 아니요. 침해가 된다거나 그런게 있을리가요. ^^;;
제가 만든걸 잘 사용해주시는 것만으로도 고맙죠. 테러, 국가안보위협, 인명살상 등의 용도에만 사용하지 않으시면 됩니다(그러려면 어떻게 사용해야 되는거지.... -_-a).
안녕하세요...
행복한 고니님...
덜렁이님.. 블로그 보고 왔어요...
정말 대단하십니다...
덕분에 좋은거 배웠구요...
담에 또 놀러 와두 되져...
항상 좋은 일만 있으세요...^^ 행복한 고니님...
덜렁이 블로그 따라서 왔습니다^^
오우,,깔끔하고,,독특^^ 넘 좋은데요^^
이뿐 한주간 되시구요,,멋지십니다,,
님덕분에,,잘사용할수 있을것 같네요^^
덜렁이님 블로그에는 사람이 많네요.
썰렁한 제 블로그에 갑자기 활기가 돋는 걸 보니... *^^*
덜렁이님을 따라 왔습니다.
솔직히 무슨 말인지 ..어렵기만 합니다.
덜렁이님께서
나눠 주시는 팁을 공부 한 후에 다시 찾아 뵙겠습니다.
flash쪽을 잘 몰라서 ;;
우선 ■ 을 이용해서
여러개를 사용할때를 위해 id값을 넘겨줄수 있는지 궁금하네요
kurome // 어차피 피커에서 하는 일은 색상을 찍어서 핸들러 함수에 넘겨주는 일뿐입니다. 만약 여러개를 사용하고자 하신다면 그 갯수만큼 핸들러 함수를 만들어주시면 됩니다. ^^;;
id 값을 넘긴다거나 하는 것은 순전히 개인의 용도에 따라서 달라지는 경우가 많아서 아예 핸들러를 따로 작성하도록 했습니다.
그리고... 예제는 그냥 사용예제일뿐이라... 필요하신 기능이 있다면 핸들러 함수만 적당히 만드셔서 사용하시면 될 것 같습니다.