冠富商务通中文社区

标题: Bootstrap3.0学习教程二十二：JS插件警告框 [打印本页]

作者: 文娟 时间: 2017-1-9 22:55
标题: Bootstrap3.0学习教程二十二：JS插件警告框
本文主要来学习一下JavaScript插件--警告框。完整教程可查看：Bootstrap3.0教程
警告框

案例
通过这个插件可以为所有警告框增加关闭功能。

<div id="alert1" class="alert alert-warning fade in">
<button id='alert1' type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Holy guacamole!</strong>
Best check yo self, you're not looking too good.
</div>

再来一个小例子

<div class="alert alert-danger fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4>Oh snap! You got an error!</h4>
<p>
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
</p>
<p>
<button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-success">Or do this</button>
</p>
</div>

通过data-dismiss属性即可开始关闭警告框的功能。无须任何的JavaScript的代码。只需为关闭按钮设置data-dismiss="alert"即可自动为警告框赋予关闭功能。
用法
如果通过JavaScript启用警告框关闭功能：
我们来修改一下第一简单的小例子

<div id="alert1" class="alert alert-warning fade in">
<button id='alert1' type="button" class="close" aria-hidden="true">×</button>
<strong>Holy guacamole!</strong>
Best check yo self, you're not looking too good.
</div>

我们主要是去掉了关闭按钮的data-dismiss属性，然后添加了一个onclick的单击按钮事件，也就是关闭警示框的事件。
来看一下如何通过JavaScript来关闭警示框

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

为所有警告框加入关闭功能。如果希望警告框被关闭时呈现动画效果，请确保为其添加了.fade 和 .in。
事件
Bootstrap中的警告框暴露了一组事件，允许你进行监听。

<script type="text/javascript">
$('#alert1').bind('close.bs.alert', function (){
alert(1);
})
</script>

添加以上代码之后，再点击关闭按钮的时候会先执行function里面的代码，然后再关闭警示框的。
总结
感觉上自己越来越熟悉了，完成这个警示框的时间明显的缩短了，看来自己也是学进去了吧。
完整教程可查看：Bootstrap3.0教程
注：相关网站建设技巧阅读请移步到建站教程频道。

欢迎光临冠富商务通中文社区 (http://gu1vhwx.nat.ipyingshe.com/news/)