목차
Toast 소개
Toast 구문
Toast 제어 - Show/Hide (보이기/숨기기)
Toast Class (클래스)
Toast Option (옵션)
Toast Method (메서드)
Toast Event (이벤트)
Toast 소개
이벤트 발생 (예 : 사용자가 버튼 클릭하거나 양식 제출 등)할 때, 몇 초 동안 잠깐 표시되는 경고상자.
Toast 구문
<button type="button" class="btn btn-primary" id="hz ">홈짱닷컴 소개</button>
<div class="toast ">
<div class="toast-header ">Homzzang.com</div>
<div class="toast-body ">홈페이지 제작관리강의</div>
</div>
<script>
$(document).ready(function(){
$("#hz ").click(function(){
$('.toast').toast('show');
});
});
</script>
예제보기
[참고] 문서의 모든 toast 내용 보기
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
※ 토스트는 지정요소 선택 후 jQuery toast() 메서드 호출해 초기화 해야 함.
Toast 제어 - Show/Hide (보이기/숨기기)
<div class="toast" data-autohide="false" >
<div class="toast-header">
<strong class="mr-auto text-primary">Homzzang.com</strong>
<small class="text-muted">5 mins ago</small>
<button type="button" class="ml-2 mb-1 close " data-dismiss="toast" >×</button>
</div>
<div class="toast-body">
홈페이지 제작관리강의
</div>
</div>
예제보기
[코드해석]
data-autohide="false" 속성 : Toast 보이기 설정.
data-dismiss="toast" 속성 : Toast 닫기
Toast Class (클래스)
.toast : 토스트 생성.
.toast-header : 토스트 머리말.
.toast-body : 토스트 내용.
Toast Option (옵션)
animation
토스트 표시하거나 숨길 때 CSS 페이드 전환 효과 추가 여부. (기본값: true)
true : 페이딩 효과 추가 O
false : 페이딩 효과 추가 X
autohide
기본적으로 토스트를 숨길 지 여부. (기본값: true)
delay
토스트가 표시되면 숨기는 데 걸리는 시간 (밀리 초). (기본값: 500)
<script>
$(document).ready(function(){
$('#hz').click(function(){
$('.toast').toast({animation: false});
$('.toast').toast({autohide: false});
$('.toast').toast({delay: 2000});
$('.toast').toast('show');
});
});
</script>
Toast Method (메서드)
Toast Event (이벤트)
주소 복사
랜덤 이동