부트 스트랩-경고 플러그인
경고 메시지는 대부분 최종 사용자에게 경고 또는 확인 메시지와 같은 정보를 표시하는 데 사용됩니다. 경고 메시지 플러그인을 사용하여 모든 경고 메시지에 해제 기능을 추가 할 수 있습니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. alert.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
용법
다음 두 가지 방법으로 경고 해제를 활성화 할 수 있습니다.
Via data attributes − 데이터 API를 통해 해제하려면 data-dismiss = "alert" 닫기 버튼에 자동으로 알림 닫기 기능을 제공합니다.
<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
×
</a>
Via JavaScript − JavaScript를 통해 해제하려면 다음 구문을 사용하세요. −
$(".alert").alert()
예
다음 예제는 데이터 속성을 통한 경고 플러그인 사용을 보여줍니다.
<div class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">
×
</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
옵션
여기에는 옵션이 없습니다.
행동 양식
다음은 경고 플러그인에 대한 몇 가지 유용한 방법입니다-
방법 | 기술 | 예 |
---|---|---|
.경보() | 이 메서드는 닫기 기능으로 모든 경고를 래핑합니다. | |
Close Method .alert ( 'close') |
모든 경고를 닫으려면이 방법을 추가하십시오. | |
닫았을 때 알림이 애니메이션으로 표시되도록하려면 알림이 .fade 과 .in 클래스가 이미 적용되었습니다.
예
다음 예제는 .alert() 방법-
<h3>Alert messages to demonstrate alert() method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){
$(".close").click(function(){
$("#myAlert").alert();
});
});
</script>
다음 예제는 .alert('close') 방법-
<h3>Alert messages to demonstrate alert('close') method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){
$(".close").click(function(){
$("#myAlert").alert('close');
});
});
</script>
이 코드를 사용하여 Try it편집자. 닫기 기능이 모든 경고 메시지에 적용되는 것을 볼 수 있습니다. 즉, 경고 메시지를 닫으면 나머지 경고 메시지도 닫힙니다.
이벤트
다음 표에는 경고 플러그인과 함께 작동하는 이벤트가 나열되어 있습니다. 이 이벤트는 경고 기능에 연결하는 데 사용할 수 있습니다.
행사 | 기술 | 예 |
---|---|---|
close.bs.alert | 이 이벤트는 close 인스턴스 메서드가 호출 될 때 즉시 발생합니다 . | |
closed.bs.alert | 이 이벤트는 경고가 닫히면 시작됩니다 (CSS 전환이 완료 될 때까지 기다림). | |
예
다음 예제는 경고 플러그인 이벤트를 보여줍니다.
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<script type = "text/javascript">
$(function(){
$("#myAlert").bind('closed.bs.alert', function () {
alert("Alert message box is closed.");
});
});
</script>