편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
최신판 | 당신의 편집 | ||
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> | ||
14번째 줄: | 14번째 줄: | ||
<script> | <script> | ||
$(function() { | $(function() { | ||
toastr.options = { | toastr.options = { | ||
"progressBar": true, | "progressBar": true, | ||
"timeOut": 1000, | "timeOut": 1000, | ||
} | } | ||
$('#show-toast1').click( function() { | |||
toastr.success("안녕하세요?") | |||
}); | |||
$('#show-toast2').click( function() { | $('#show-toast2').click( function() { | ||
toastr.warning("안녕하세요?", "제목", {timeOut: 5000}); | toastr.warning("안녕하세요?", "제목", {timeOut: 5000}); | ||
}); | }); | ||
36번째 줄: | 31번째 줄: | ||
<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> | ||