어느덧 2007년의 12월도 1/3이 훌쩍 지나가버렸습니다.
여러분들은 2007년에 계획했던 것들을 모두 이루셨는지요, 많은 분들이 그러하듯이~ 저또한 일부 이룬것도 있고, 이루지 못한 것도 있습니다.
언제나 그러하듯이 게으름이 가장 큰 요인인듯 합니다. 하지만 그러한 게으름도 제주위에서 열심히 응원해주시는 많은 분들이 계시기에 그나마 지금까지 온 것 같습니다.
오늘은 AjaxLab에서 선보이는 MessageBox를 소개할까합니다. 아직 준비중인 곳이니까~
AjaxLab에서 많은 부분이 미완성입니다. 앞으로 계속 발전하는 모습을 지켜봐 주세요~
MessageBox를 사용하기 위해 커다란 라이브러리를 include하여 사용하는 것은 바람직하지 않다.
하여 자주 사용하는 MessageBox를 각 Framework(또는 non-Framework)에서 작동 할 수 있도록 최대한 가볍게 작성한다.
구현 목표
- MessageBox의 크기를 지정할 수 있다. (가로, 세로)
- MessageBox의 제목을 지정할 수 있다.
- MessageBox의 내용을 지정할 수 있다. (text, html)
- MessageBox와 브라우저의 충돌여부를 판단하여 이동범위를 제한할 수 있다.
- MessageBox의 출현후 콜백함수를 지정할 수 있다.
- MessageBox의 출현지점 좌표를 지정할 수 있다.
- MessageBox의 드래그가 가능하다.
사용법
해당 JS를 인클루드 하고, 아래와 같이 선언하여 사용하고, 원하는 정보를
설정하여 사용한다.
<script type="text/javascript" src="js/MSGBox.js"></script>
/*
new MSGBox({width, height, collision, callback})
width : 메세지박스 가로사이즈 (number)
height : 메세지박스 세로사이즈 (number)
collision : 메세지박스의 충돌상태 (boolean)
callback : 메세지박스의 출현후 콜백지정 (function)
*/
var msg = new MSGBox({width:200, height:120, collision:true, callback:''});
/*
drawBox(title, closeImg, contents, X, Y)
title : 제목줄에 표시될 텍스트 (string)
closeImg : 닫기버튼 사용시에 이미지 경로, 없으면 텍스트 대체 (string)
contents : 메세지박스의 내용에 보여줄 내용 (string)
X : 메세지박스 출현의 x좌표 (number)
Y : 메세지박스 출현의 y좌표 (number)
*/
msg.drawBox('긴 제목줄은 어떻게 될까요? 테스트해봐요','close.gif','내용');
스크린샷
AjaxLab이란 곳은 Ajax를 좋아하는 사람들이 모여 만든 곳이고, 저뿐만 아니라 다른 분들도 곧 프로젝트를 오픈할 예정입니다. 많이들 사랑해주시구요~ 제 블로그를 통해서 이곳의 소식을 전하도록 하겠습니다.
posted by blankus
이 글의 트랙백 주소 :: http://www.blankus.net/trackback/37
