JQuery 플러그인 toast 실습

jQuery 플러그인 toast 실습
jQuery 플러그인 토스트 간단예제
jquery.toast 튜토리얼

1 소스 코드

<link rel="stylesheet" href="//rawgit.com/Soldier-B/jquery.toast/master/jquery.toast/jquery.toast.min.css" />
<script src="//code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="//rawgit.com/Soldier-B/jquery.toast/master/jquery.toast/jquery.toast.min.js"></script>
<script>
function createToast(t){
	var message = '일상적인 토스트입니다. 이 메시지는 자동으로 사라집니다.';
	var options = {	duration: 4000,	sticky: false, type: t };

	switch(t) {
		case 'danger':
			message = '<h4>경고!</h4> 위험을 알리는 토스트입니다. 닫아야 없어집니다.';
			options['sticky'] = true;
			break;
		case 'info':
			message = '<h4>알림!</h4> 이것은 이러하기 때문에, 저것은 저러하기 때문에 그렇습니다. 내용을 길게 써보았습니다.';
			break;
		case 'success':
			message = '<h4>성공!</h4> 방금 토스트가 만들어졌습니다. 축배를 듭시다.';
			options['sticky'] = true;
			break;
	}
	$.toast(message, options);
}

$(document).ready(function(){
	$.toast.config.align = 'right';
	$.toast.config.width = 400;
	
	$('button').click(function(){
		createToast($(this).attr('class'));
		return false;
	});
});
</script>

<button class="">기본 토스트</button>
<button class="danger">경고 토스트</button>
<button class="info">정보 토스트</button>
<button class="success">성공 토스트</button>

예제: http://jmnote.com/jq/plugin_toast.php

2 참고 자료