Bootstrap历练实例:警告框(Alert)插件事件
2015-11-30 14:49
627 查看
事件
下表列出了警告框(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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例:警告框(Alert)插件事件</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<div id="myAlert" class="alert alert-success">
<a href="#"data-dismiss="alert"aria-hidden="true"class="close">×</a>
<strong>成功!</strong>网络连接正常。
</div>
</div>
<script>
$(document).ready(function () {
$("#myAlert").bind("closed.bs.alert", function () {
alert("警告窗口已关闭。");
})
})
</script>
</body>
</html>
相关文章推荐
- Bootstrap历练实例:警告框(Alert)插件的方法
- Bootstrap 警告框(Alert)插件
- Bootstrap历练实例:弹出框(popover)事件
- Bootstrap历练实例:popover插件中的方法
- Bootstrap免费模板站推荐
- 全面解析Bootstrap排版使用方法(文字样式)
- 全面解析Bootstrap排版使用方法(标题)
- Bootstrap每天必学之js插件
- Bootstrap打印问题
- Bootstrap每天必学之面板
- Bootstrap每天必学之媒体对象
- bootstrap中的缩略图
- bootstrap中的段落和强调内容
- bootstrap中的段落和强调内容
- Bootstrap每天必学之进度条
- bootstrap在reset.css文件中设置margin为0,因此其他的标签需要重新设计margin。
- bootstrap datetimepicker定位不准确问题
- Bootstrap每天必学之进度条
- Bootstrap每天必学之媒体对象
- Bootstrap每天必学之面板