"JQuery 토스트 toastr"의 두 판 사이의 차이

2020년 11월 2일 (월) 02:53 기준 최신판

1 개요[ | ]

jQuery 토스트 toastr

toastr.success('내용', '제목');
toastr.warning('내용', '제목');
toastr.error('내용', '제목');

2 예시[ | ]

<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='//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js'></script>
<script>
$(function() {

    $('#show-toast1').click( function() {
	toastr.options = {
		"progressBar": true,
		"timeOut": 1000,
	}
        toastr.warning("안녕하세요?", "제목", {timeOut: 5000});
    });
    $('#show-toast2').click( function() {
	toastr.options = {
		"progressBar": true,
		"timeOut": 1000,
	}
        toastr.warning("안녕하세요?", "제목", {timeOut: 5000});
    });
});
</script>

<button id='show-toast1'>토스트 #1</button>
<br>
<br>
<button id='show-toast2'>토스트 #2</button>

3 같이 보기[ | ]

팝업 알림

4 참고[ | ]

@@ 1번째 줄: / 1번째 줄: @@
 ==개요==
 ;jQuery 토스트 toastr
-<source lang='jQuery'>
+<syntaxhighlight lang='jQuery'>
 toastr.success('내용', '제목');
 toastr.warning('내용', '제목');
 toastr.error('내용', '제목');
-</source>
+</syntaxhighlight>
 ==예시==
-<source lang='jQuery'>
+<syntaxhighlight lang='jQuery'>
 <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>
@@ 15번째 줄: / 15번째 줄: @@
 $(function() {
-	$('#show-toast1').click( function() {
+    $('#show-toast1').click( function() {
 	toastr.options = {
 		"progressBar": true,
-		"timeOut": 5000,
+		"timeOut": 1000,
 	}
-		toastr.success("안녕하세요?")
+        toastr.warning("안녕하세요?", "제목", {timeOut: 5000});
-	});
+    });
      $('#show-toast2').click( function() {
 	toastr.options = {
@@ 36번째 줄: / 36번째 줄: @@
 <br>
 <button id='show-toast2'>토스트 #2</button>
-</source>
+</syntaxhighlight>
 <jsfiddle height='350'>rkw1kmgd</jsfiddle>