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 참고 자료

• http://plugins.jquery.com/toast/
• https://github.com/Soldier-B/jquery.toast