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) {
    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>

2 같이 보기

• jQuery UI 다이얼로그

3 참고 자료

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