前言
上一章博客我们讲解了Bootstrap的组件
这一章我们来讲一下一些JavaScript组件
一，JavaScript插件简介
- 为什么需要JavaScript插件？
- 项目中遇到复杂的交互效果，如轮播图、模态框等可以使用JavaScript插件轻松完成
- 插件的引入方式
- data属性
- data属性让JavaScript插件使用门槛降低
二，插件的引入方式
- 一次性全部插件引入
- 通过将bootstrap.js或者bootstrap.min.js引入可实现一次性全部引入
- 按需单个引入插件
- 使用Bootstrap框架提供的单个“*.js”文件，只引入某一个插件使用
三，data属性
- JavaScript插件可以不写任何的JavaScript代码就能实现动态效果
- 只需要按照data属性去操作即可
data属性有很多，这些属性都是在data后紧跟一些名词，例如比较常用的data-toggle、data-target、data-dismiss等
- JavaScript插件的使用方法
- 使用data属性来调用JavaScript插件
- 使用原生代码来调用JavaScript插件
考虑到使用的方便性和快捷性，比较推荐使用data属性来调用JavaScript插件
四，关闭data属性
- 需自己封装data属性功能，希望Bootstrap框架的data属性不影响自己封装的功能时，需要将Bootstrap框架的data属性关闭
语法
$(document).off('.data-api');
- 如何只针对某个特定的插件将data属性关闭？
- 只需在 data-api 前面添加特定插件的名称作为命名空间
语法
// 关闭旋转轮播插件的data属性 $(document).off('.carousel.data-api');
五，过渡插件
- Bootstrap使用的动画过渡效果都是基于CSS3动画来制作的，所以IE6-IE8浏览器不能使用过渡效果
如果使用压缩版的 bootstrap.min.js 文件，则无需再单独引入过渡插件，因为此时过渡插件的功能已经融入到其他插件中
- 过渡插件严格意义上不是一个标准的插件，是针对transitionEnd 事件的一个基本辅助工具
- 常被其他插件用来检测当前浏览器是否支持 CSS 的过渡效果
- 过渡效果可以在全局范围禁用，必须将禁用代码放在 transition.js （或 bootstrap.min.js）后面
语法
$.support.transition = false;
六，模态框
- 模态框（Modal）是覆盖在父窗体上的子窗体
- 目的是显示来自一个单独源的内容，可以在不离开父窗体的情况下有一些互动
- 模态框组成部分
- 模态框包含头部（模态框标题和关闭按钮）、中间内容区域和一组放置于底部的按钮
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模态框</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> </style> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 显示模态框 </button> <div class="modal fade" id="myModal" 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"> <form class="form-inline" action="#"> <div class="form-group"> <label for="user">用户名:</label> <input type="text" class="form-control" id="user" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="pwd">密码:</label> <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> </div> <input type="submit" class="form-control" value="登录"> </form> </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="../js/jquery.js"></script> <script src="../js/bootstrap.min.js"></script> <script> </script> </html>
注意
data-target="#myModal" 里面的 #myModal 要和 下面的id对应
- 千万不要在一个模态框上重叠另一个模态框，否则不会有效果
- 务必将模态框的 HTML 代码放在文档的最高层级内（作为 body 元素的直接子元素），避免其他组件影响模态框的展现和功能
6.1，JavaScript操作模态框
- 除data属性之外，也可以使用JavaScript操作模态框
- 只需一行 JavaScript 代码
- 通过模态框的id调用模态框方法操作模态框
- JavaScript操作模态框
- 模态框属性
- 模态框方法
- 模态框事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模态框</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> </style> <body> <button type="button" class="btn btn-primary btn-lg" id="jsbtn"> js模态框 </button><br> <div class="modal fade" id="myModal" 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"> <form class="form-inline" action="#"> <div class="form-group"> <label for="user">用户名:</label> <input type="text" class="form-control" id="user" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="pwd">密码:</label> <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> </div> <input type="submit" class="form-control" value="登录"> </form> </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="../js/jquery.js"></script> <script src="../js/bootstrap.min.js"></script> <script> $("#jsbtn").click(function(){ $('#myModal').modal('show') }) </script> </html>
6.2，模态框属性
通过JavaScript可以操作模态框属性
6.3，模态框方法
- 模态框支持传入特定的字符串执行其内部方法
- 常用的字符串名称和用法的描述
6.4，模态框事件
- 在实际的开发中，有时候希望在模态框弹出之前或者之后执行一些特定的操作，该如何来操作呢？
- 模态框提供一些事件用于监听模态框执行的过程，在这些过程中开发者可以执行自定义的代码
- 模态框事件
