Bootstrap 正告框(Alert)插件

正告框(Alert)音讯大多是用来想终端用户显现比如正告或承认音讯的信息。运用正告框(Alert)插件,您能够向一切的正告框音讯增加可取消(dismiss)功用。

如果您想要独自引证该插件的功用,那么您需求引证 alert.js。或许,正如 Bootstrap 插件概览 一章中所说到,您能够引证 bootstrap.js 或压缩版的 bootstrap.min.js

用法

您能够有以下两种办法启用正告框的可取消(dismissal)功用:

  • 经过 data 特点:经过数据 API(Data API)增加可取消功用,只需求向封闭按钮增加 data-dismiss="alert",就会主动为正告框增加封闭功用。
    <a class="close" data-dismiss="alert" href="#" aria-hidden="true">
       &times;
    </a>
    
  • 经过 JavaScript:经过 JavaScript 增加可取消功用:
    $(".alert").alert()
    

实例

下面的实例演示了经过 data 特点运用正告框(Alert)插件的用法。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 正告框(Alert)插件</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">
      &times;
   </a>
   <strong>正告!</strong>您的网络连接有问题。
</div>

</body>
</html>

成果如下所示:

正告框(Alert)插件

选项

没有选项。

办法

下面是一些正告框(Alert)插件中有用的办法:

办法描绘实例
.alert()该办法让一切的正告框都带有封闭功用。
$('#identifier').alert();
Close Method .alert('close')封闭一切的正告框。
$('#identifier').alert('close');
如需在封闭时启用动画作用,请保证增加了 .fade.in class。

实例

下面的实例演示了 .alert() 办法的用法:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 正告框(Alert)插件 alert() 办法</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h3>正告框(Alert)插件 alert() 办法</h3>
<div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">&times;</a>
   <strong>成功!</strong>成果是成功的。
</div>
<div id="myAlert" class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">&times;</a>
   <strong>正告!</strong>您的网络连接有问题。
</div>

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

</body>
</html>

下面的实例演示了 .alert('close') 办法的用法:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 正告框(Alert)插件 alert('close') 办法</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h3>正告框(Alert)插件 alert('close') 办法</h3>
<div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">&times;</a>
   <strong>成功!</strong>成果是成功的。
</div>
<div id="myAlert" class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">&times;</a>
   <strong>正告!</strong>您的网络连接有问题。
</div>

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

</script>   

</body>
</html>   

您能够看到一切的正告框都应用了封闭功用,即封闭恣意的正告框,其他剩下的正告框也会被封闭。

事情

下表列出了正告框(Alert)插件中要用到的事情。这些事情可在函数中当钩子运用。

事情描绘实例
close.bs.alert当调用 close 实例办法时当即触发该事情。
$('#myalert').bind('close.bs.alert', function () {
  // 履行一些动作...
})
closed.bs.alert当正告框被封闭时触发该事情(将等候 CSS 过渡作用完结)。
$('#myalert').bind('closed.bs.alert', function () {
  // 履行一些动作...
})

实例

下面的实例演示了正告框(Alert)插件的事情:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 正告框(Alert)插件事情</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">&times;</a>
   <strong>成功!</strong>成果是成功的。
</div>

<script type="text/javascript">
$(function(){
   $("#myAlert").bind('closed.bs.alert', function () {
      alert("正告音讯框被封闭。");
   });
});
</script>  

</body>
</html>  

成果如下所示:

正告框(Alert)插件事情