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){
  if( t == 'danger' ) {
    $.toast( '<h4>경고!</h4> 위험을 알리는 토스트입니다. 닫아야 없어집니다.', { sticky: true, type: 'danger' });
    return;
  }
  if( t == 'info' ) {
    $.toast( '<h4>알림!</h4> 이것은 이러하기 때문에, 저것은 저러하기 때문에 그렇습니다. 내용을 길게 써보았습니다.', { duration: 4000, type: 'info' });
    return;
  }
  if( t == 'success' ) {
    $.toast( '<h4>성공!</h4> 방금 토스트가 만들어졌습니다. 축배를 듭시다.', { sticky: true, type: 'success' });
    return;
  }
  $.toast( '일상적인 토스트입니다. 이 메시지는 자동으로 사라집니다.', { duration: 4000 });
}

$(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>

</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