prototype.js 기반의 간단한 javascript alert box 라이브러리 - embox.js


 prototype.js  와 javascript 를 공부하면서 배웠던것을 써먹어 보기도 할겸, 겸사겸사 한번 만들어 봤습니다. 보기싫은 alert 창 대신에 lightbox 느낌으로 경고를 해줄수 있게 됩니다.

사용 방법은 간단합니다.
압축 해제 하고 나서 나오는 js 파일과, css 파일을 각각 필요한 장소에 복사 하시고, 필요한 곳에서 링크를 걸어주세요 그리고서, 다음과 같이 코드를 작성해 주시면 되겠습니다.

function onBoxShow(msg){
    var objBox = new embox(msg,{width:'400', height:'200' });
    objBox.showBox();
}

전체 코드는 압축 해제하면 나오는 embox.html 을 참조 하세요. ^^;

embox 클래스의 문법은 다음과 같습니다.

- syntax -
 new embox(msg, {options});

- example -
 var objBox = new embox('hi there~!!', {url:"http://efolder.tistory.com", btnValue:"Go Go", width:'400', height:'200'});
 objBox.showBox();


options 에 옵션을 넣느냐 마느냐에 따라서 동작 방식이 달라지게 됩니다.
현재는 4개의 options 를 정의 할 수 있습니다. width와 height 를 정의 하지 않으면 default 값이 들어가게 되고요, btnValue 를 지정하게 되면 경고창에 나오게 되는 버튼에 표시되는 문자를 정의 할 수 있습니다.  마지막으로, url 옵션은 btnValue 와 함께 쓰여야 하는데요, url 을 써주게 되면 창이 닫히면서 지정한 url 로 페이지가 이동하게 됩니다.

정리를 해보자면

  • lightbox 처럼 사용하려면 : btnValue 옵션을 주지 않습니다.
  • 창의 크기를 조절하려면 : width, height 값을 조절 합니다. 주의 할점은 숫자만 쓰면 됩니다. px 와 같은 단위를 붙일 필요 없습니다.
  • 버튼을 클릭하게 하여 닫히게 하고 싶을때는 : btnValue 옵션을 줍니다.
  • 경고창이 닫힐때 원하는 url로 이동하려면 : url 옵션과, btnValue 옵션을 줍니다.

간단하죠? ^^;

사용자 삽입 이미지






Posted by 하루하루