편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
최신판 | 당신의 편집 | ||
1번째 줄: | 1번째 줄: | ||
==개요== | ==개요== | ||
;jQuery 토스트 toastr | ;jQuery 토스트 toastr | ||
< | <source lang='jQuery'> | ||
toastr.success('내용', '제목'); | toastr.success('내용', '제목'); | ||
toastr.warning('내용', '제목'); | toastr.warning('내용', '제목'); | ||
toastr.error('내용', '제목'); | toastr.error('내용', '제목'); | ||
</ | </source> | ||
==예시== | ==예시== | ||
< | <source lang='jQuery'> | ||
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css'/> | <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css'/> | ||
<script src='//code.jquery.com/jquery.min.js'></script> | <script src='//code.jquery.com/jquery.min.js'></script> | ||
15번째 줄: | 15번째 줄: | ||
$(function() { | $(function() { | ||
$('#show-toast1').click( function() { | |||
toastr.options = { | toastr.options = { | ||
"closeButton": false, | |||
"debug": false, | |||
"newestOnTop": false, | |||
"progressBar": false, | |||
"positionClass": "toast-bottom-right", | |||
"preventDuplicates": false, | |||
"showDuration": "300", | |||
"hideDuration": "1000", | |||
"timeOut": "5000", | |||
"extendedTimeOut": "1000", | |||
"showEasing": "swing", | |||
"hideEasing": "linear", | |||
"showMethod": "fadeIn", | |||
"hideMethod": "fadeOut" | |||
} | } | ||
toastr.success("안녕하세요?") | |||
}); | |||
$('#show-toast2').click( function() { | $('#show-toast2').click( function() { | ||
toastr.options = { | toastr.options = { | ||
36번째 줄: | 48번째 줄: | ||
<br> | <br> | ||
<button id='show-toast2'>토스트 #2</button> | <button id='show-toast2'>토스트 #2</button> | ||
</ | </source> | ||
<jsfiddle height='350'>rkw1kmgd</jsfiddle> | <jsfiddle height='350'>rkw1kmgd</jsfiddle> | ||