안드로이드에서는 팝업 버튼보다는 나왔다가 일정 시간이 지나면 사라지는 마치 토스터기에서 빵이 튀어나오듯 한 "토스터"를 사용한다.
이에 비해 웹에서는 주로 팝업 메시지를 사용해 여러 안내 문구를 보여줬다. 하지만, 최근 모바일 환경에서의 웹 사용이 급증하고 PC환경에서도 토스트 메시지가 필요한 순간이 많아졌다.
팝업 메시지를 어떻게 잘 커스터마이징 해 볼까도 싶었지만, 제이쿼리 플러그인 중에서 정말 깔끔하게 디자인된 토스트 플러그인이 존재한 다는 것을 알게 되었다.
바로 Jquery plugin toastr 이다.
이 플러그인을 사용하기 위해서는 우선 jquery가 기본이다. toastr.js를 까보면 그 안에 제이쿼리 문법이 들어있기 때문이다. 거기에 toastr js와 css를 다운받아서 각 프로젝트 구조에 맞는 위치에 넣고 아래처럼 각각 임포트 해 주면 되겠다.
1 2 3 4 | <script src="js/jquery-3.1.1.min.js"></script> <!-- Toastr --> <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet"> <script src="js/plugins/toastr/toastr.min.js"></script> | cs |
Toastr는 기본적으로 아래 네개의 기본 함수를 제공한다.
1 2 3 4 | toastr.success('www.leafcats.com', 'Toastr success!'); toastr.info('www.leafcats.com', 'Toastr info!'); toastr.warning('www.leafcats.com', 'Toastr warning!'); toastr.error('www.leafcats.com', 'Toastr error!'); | cs |
파라미터중 앞은 제목, 뒤에 메시지 본문을 넣으면 된다.
Toastr는 여러 옵션을 제공하는데, 예시를 보자면 아래와 같다.
test1이라는 id의 버튼을 클릭했을 때 토스트 메시지를 보여주는 기능을 구현했다.
1 2 3 4 5 6 7 8 9 | $("#test1").click(function(){ toastr.options = { closeButton: true, progressBar: true, showMethod: 'slideDown', timeOut: 4000 }; toastr.success('www.leafcats.com', 'Toastr success!'); }); | cs |
toastr가 일정시간(4000ms)가 지나면 사라지도록 했다. 닫기 버튼을 별도로 달아서 시간이 지나기 전에도 임의로 없앨 수 있으며, 시간 경과는 progress bar로 보여준다.
(toastr의 각종 옵션들은 이 데모페이지를 참고하면 매우 편리하게 확인할 수 있다!!
toastr 데모 페이지(github) : http://codeseven.github.io/toastr/demo.html )
같은 코드로 success, info, warning, error를 버튼에 달아 구현한 화면이다.
위 예제 캡쳐 화면과 코드를 함께 보면 좀 더 명확할 것이다.
지정한 timeOut 시간이 경과하지 않고 닫기 버튼을 누르지 않을 경우 위로 다음 메시지가 쌓이게 되고, 시간이 경과한 토스트 메시지부터 사라진다.
매우 간단한 코드로 깔끔한 디자인의 토스트 메시지를 구현할 수 있다.
이렇게 웹 개발을 하다가 필요한 기능이 생길 때, 직접 구현하는 것도 좋지만 이미 상상하는 거의 모든 기능들이 오픈소스 플러그인으로 누군가가 배포하고 있을 것이다.
심지어 디자인적도 매우 괜찮은 경우가 많으니 일단 먼저 구글링을 해서 찾아보고 결정하는 것이 여러모로 좋을 것이다.
