Roar - 자바스크립트 메시지 알림 (Growl 처럼)

만들고 있는 웹어플에 Ajax에 결과 메시지를 화면에 뿌려줄 수 있는 메시지 알림을 찾아보다가 최종적으로 선택한게 된 Roar.

보통 메신저등에서 친구 로그인 정보등에 쓰이는 Growl 형태가 심플하고 좋은거 같아서 찾아보니, 자바 스크립트의 Alert와 비슷한 ClientCide에 Stickywin.Modal이 있었지만 약간 무거운 느낌과 사용법에 대한 부담으로 인해서 일단 제외. 그러고나니 무툴즈에서 쓸 수 있는 코드는 2가지 있었다.

1. Window.Growl

http://icebeat.bitacoras.com/mootools/growl/

사용법이 간단하고 인터페이스를 이쁘게 구성할 수 있지만, 일단 너무 형태가 고정되어 있고 가장 큰문제는 현재 무툴즈 최신버전에서는 제대로 돌아가지 않는다는 점이다(에러가 난다).
무툴즈 비공식 포럼에서도 이런 부분을 풀어보려고 한 사람도 있긴한데 완전하게는 못한듯...

2. Roar

http://digitarald.de/project/roar/

특별히 설정안하고 사용도 가능하지만 옵션이나 CSS를 좀 써야 이쁘게 보여진다; 하지만 가장 안정적으로 돌아가고 구조적으로도 좋은편. 또 다른 대안이 없는 관계로 이놈을 쓰기로 결정. 해외 포럼에서도 이게 대세; 사실 유연하게 쓰기엔 편한데, default style이 없이 엘리먼트를 생성해서 그런지 IE7 이나 구글 크롬에서는 좀 이상하게 보인다. 이부분은 스크립트 보고 고쳐볼까 생각중...

사용법
window.addEvent("domready", function() { var roar1 = new Roar(); var roar2 = new Roar({ { duration: 3000, // 보여주는 시간 position: 'upperLeft', // 보여주는 위치 upperLeft, upperRight, lowerLeft, lowerRight container: null, // 콘테이너 지정 bodyFx: null, // FX 관련인데 아직 잘 모름 itemFx: null, // 마찬가지 margin: {x: 10, y: 10}, // 시작 지점에서 margin 지정 offset: 10, // 연속 메시지인 경우 옵셋 값 className: 'roar', // class 이름 정의 onShow: $empty, // 이벤트들 (함수지정) onHide: $empty, onRender: $empty } }); }); roar1.alert("title","message");
Implements 에 보면 Chain도 있어서 메시지가 사라지고 나서 연결 동작을 지정할 수도 있다.

roar 사용예

 

Roar.zip

파일에는 roar.js, roar.css가 들어 있으면 적절한 위치에 넣거나 조절해서 사용하면 된다.

[ 업데이트 2009.06.04 ]

 roar에는 chain 메소드를 사용할 수 있다. roar에 의해 메시지가 보여지고 사라지는 순간 chain에 의해 지정된 기능을 수행한다.
roar1.alert("title","message"); roar1.chain(function() { document.location.reload(); });
또 하나는 roar 위치에 관련된 정보인데 좌측상단, 우측상단으로 지정하는 경우외 하단으로 지정하면 브라우저 상태 및 Container 위치에 따라 브라우저 스크롤바가 생겼다 사라지기도 한다. 참고해서 배치해야 될듯