JQuery 토스트 메세지 사용하기 toast message

안드로이드 앱을 만들어보신분이라면 토스트 메세지가 어떤건지 바로 이해하실것이다.
순서대로 올라와서, 자동으로 사라지는 메세지 박스이다.

구조가 간단해서 직접 만들어보셔도 좋을것이다.
아래 링크에서 기존에 만들어진 jquery 플러그인을 다운받아보자.

 

https://github.com/Soldier-B/jquery.toast

 

 

html 파일에 css 와 js 파일을 넣고, 토스트메세지를 호출하면 된다.

 

<link rel="stylesheet" type="text/css" href="jquery.toast.min.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.toast.min.js"></script>

 

 

$.toast('메세지', 옵션);

 

메세지는 html 코드로, 문자열에 html 태그를 포함할 수도 있다.
옵션은 json 방식으로 넣어주면된다.
json 은 javascript object notation 으로, { } 로 둘러싸인 객체 표현법이다.

 

$.toast('일반 메세지입니다.');

기본 메세지에, 기존옵션을 사용하여, 5초후에 사라진다.

 

$.toast('<h4>위험</h4> 이것은 위험 메세지입니다.', { type: 'danger', duration : 2000 } );

경고 메세지로, duration 값을 2000 으로 주었기 때문에, 2초후에 사라진다.

 

$.toast('<h4>정보</h4> 이것은 정보 메세지입니다.', { type: 'info', sticky : true } );

정보 메세지이고, sticky 에 true라고 주었기 때문에, x 버튼을 눌러 닫기 전까지는 계속 표시된다.

 

$.toast('<h4>성공</h4> 이것은 성공 메세지입니다.', { type: 'success', duration: 3000 } );

성공 메세지이고, 3초후에 자동으로 사라진다.

 

그외에도 toast 의 config 를 설정할 수 도 있다.

이 config 값은 최초에 1회만 설정하면, 이후 toast 메세지는 모두 설정값에 따라 나타난다.

 

기존으로 toast 메세지는 화면의 center 에 나오며, 메세지박스 사지는 500 이다.

 

$.toast.config.align = 'right';
$.toast.config.width = 300;