Bootstrap(三)JavaScript插件
（一）、模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和实用的功能集。
不支持同事打开多个模态框
千万不要在一个模态框上重叠另一个模态框，要想同时支持多个模态框，需要自己写额外的代码来实现。
模态框放置的（HTML）位置
务必将模态框的HTML代码放在文档的最高层级内（也就是说尽量作为body标签的子元素），以避免其他组件影响模态框的展现和/或功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<title>模态框</title>
</head>
<body>
<button data-toggle="modal" data-target="#myModal">点我</button>
<!--模态框-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script src="../day31/jquery-3.2.1.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
// do something...
alert("我让模态框显示出来，但是它还没来得及显示");
});
$('#myModal').on('shown.bs.modal', function (e) {
// do something...
alert("我让模态框显示出来，现在它已经显示出来了");
})
})
</script>
</html>
（二）、弹出方式
1、通过tata属性（放在button里）
data-toggle="modal" data-target="#myModal"
2、通过js代码
- $("#myModal").modal("show") --> 显示出来
- $("#myModal").modal("hide) --> 隐藏
- $("#myModal").modal("hide) -->显示的隐藏，隐藏的显示
3、模态框的大小：（放在modal里面标签上的）
.modal-lg
.modal-sm
4、动画效果：fade
5、模态框里也可以用栅格
（三）、一个模态框要有的三个部分
1、标题区 .modal-header
2、内容区 .modal-body
3、按钮区 .modal-footer
（四）、参数
1、backdrop： true/false/'static' --> 遮罩层的参数
2、keyboard: true/false --> 键盘上的ESC按键
#
##
###
####
（五）、事件
显示之前
显示完
隐藏之前
隐藏完
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
// do something...
alert("我让模态框显示出来，但是它还没来得及显示");
});
$('#myModal').on('shown.bs.modal', function (e) {
// do something...
alert("我让模态框显示出来，现在它已经显示出来了");
})
二、轮播图（Carousel）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>轮播图示例</title>
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="banner_1.jpg" alt="...">
<div class="carousel-caption">
<h2>这是第一张图</h2>
<p>你好好看</p>
</div>
</div>
<div class="item">
<img src="banner_2.jpg" alt="...">
<div class="carousel-caption">
<h2>这是第二张图</h2>
<p>你好好看</p>
</div>
</div>
<div class="item">
<img src="banner_3.jpg" alt="...">
<div class="carousel-caption">
<h2>这是第三张图</h2>
<p>你好好看</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="../day31/jquery-3.2.1.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script>
//控制轮播间隔，单位毫秒
$('.carousel').carousel({
interval: 2000
})
</script>
</body>
</html>
三、左侧菜单（Collapse）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<title>左侧菜单</title>
</head>
<body>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>11</p>
<p>22</p>
<p>33</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<span>内容区</span>
</div>
</div>
</div>
</div>
</body>
<script src="../day31/jquery-3.2.1.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</html>
四、插件
（一）font awesome
网址：http://fontawesome.io/
步骤：
1、下载完成后解压（Font-Awesome-master）
2、拿出css和fonts文件
3、i 标签：把Bootstrap自带图标的span标签换成i标签
最基本的，在原有的基础上放大百分之33 <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x
字体图标可以叠加
旋转180度
（二）sweetalert
网址：https://limonte.github.io/sweetalert2/
引用css文件和JS文件之后
步骤：1、下载完成后解压（Font-Awesome-master）
2、只拿出dist
swal("标题", "内容", "success")
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>sweetalert示例</title>
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<link rel="stylesheet" href="sweetalert/sweetalert2.min.css">
</head>
<body>
<button class="btn btn-success">点我</button>
<script src="../day31/jquery-3.2.1.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="sweetalert/sweetalert2.all.min.js"></script>
<script>
$("button").on("click", function () {
swal("标题", "内容", "success");
})
</script>
</body>
</html>
以下为了解内容：
Toastr
http://www.jq22.com/yanshi476 可以查看简单示例
jQueryLazyLoad（懒加载）
解压后：JQueryLazyLoad-master文件夹，拿出jquery.lazyload.js文件
示例：
data-original是隐藏的，src是显示的，当是懒加载时，你点击哪个才会显示出隐藏的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>懒加载示例</title>
</head>
<body>
<div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="http://img1.gtimg.com/cd/pics/hv1/6/120/550/35794356.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
<div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.js"></script>
<script>
$("img.lazy").lazyload({
effect: "fadeIn",
event: "click"
})
</script>
</body>
</html>
浙公网安备 33010602011771号