Bootstrap - Plugin cảnh báo

Thông báo cảnh báo chủ yếu được sử dụng để hiển thị thông tin như thông báo cảnh báo hoặc xác nhận cho người dùng cuối. Sử dụng plugin thông báo cảnh báo, bạn có thể thêm chức năng loại bỏ cho tất cả các thông báo cảnh báo.

Nếu bạn muốn bao gồm chức năng plugin này một cách riêng lẻ, thì bạn sẽ cần alert.js. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể bao gồm các bootstrap.js hoặc minified bootstrap.min.js .

Sử dụng

Bạn có thể cho phép loại bỏ cảnh báo theo hai cách sau:

• Via data attributes - Để loại bỏ qua API dữ liệu, chỉ cần thêm data-dismiss = "alert" vào nút đóng của bạn để tự động cung cấp chức năng đóng cảnh báo.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

• Via JavaScript - Để loại bỏ qua JavaScript, hãy sử dụng cú pháp sau:

$(".alert").alert()

Thí dụ

Ví dụ sau minh họa việc sử dụng plugin cảnh báo thông qua các thuộc tính dữ liệu.

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

Tùy chọn

Không có tùy chọn nào ở đây.

Phương pháp

Sau đây là một số phương pháp hữu ích cho plugin cảnh báo -

$('#identifier').alert();

$('#identifier').alert('close');

Để cho phép các cảnh báo hoạt động khi đóng cửa, hãy đảm bảo rằng chúng có .fade và .in lớp học đã được áp dụng cho họ.

Thí dụ

Ví dụ sau minh họa việc sử dụng .alert() phương pháp -

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert();
      });
   });  
</script>

Ví dụ sau minh họa việc sử dụng .alert('close') phương pháp -

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</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>

Hãy thử mã này bằng cách sử dụng Try itngười biên tập. Bạn có thể thấy rằng chức năng đóng được áp dụng cho tất cả các thông báo cảnh báo tức là đóng bất kỳ thông báo cảnh báo nào, phần còn lại của các thông báo cảnh báo cũng sẽ bị đóng.

Sự kiện

Bảng sau liệt kê các sự kiện để làm việc với plugin cảnh báo. Sự kiện này có thể được sử dụng để kết nối với chức năng cảnh báo.

$('#myalert').bind('close.bs.alert', function () {
   // do something
})

$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Thí dụ

Ví dụ sau minh họa các sự kiện plugin cảnh báo:

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</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>