JQuery 플러그인 toast 실습

by JM note

HTML

<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) {
    switch (t) {
      case 'danger':
        $.toast('<h4>경고!</h4> 위험을 알리는 토스트. 닫아야 없어집니다.', {
          sticky: true,
          type: 'danger'
        });
        return;
      case 'info':
        $.toast('<h4>알림!</h4> 2초간 알려드립니다.', {
          duration: 2000,
          type: 'info'
        });
        return;
      case 'success':
        $.toast('<h4>성공!</h4> 토스트 생성에 성공했습니다. 닫아야 없어집니다.', {
          sticky: true,
          type: 'success'
        });
        return;
    }
    $.toast('일반적인 토스트. 2초 후 사라집니다.', {
      duration: 2000
    });
  }

  $(document).ready(function() {
    $.toast.config.align = 'right';
    $.toast.config.width = 400;

    $('button').click(function() {
      createToast($(this).attr('class'));
    });
  });

</script>

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