[Bootstrap]7天深入Bootstrap(5)JavaScript插件
在bs3.X中，提供了12种JavaScript插件，分别是：动画过渡（Transition）、模态弹窗（Modal）、下拉菜单（Dropdown）、滚动侦测（Scrollspy）、选项卡（Tab）、提示 框（Tooltip）、弹出框（Popover）、警告框（Alert）、按钮（Button）、折叠（Collapse）、旋转轮播（Carousel）、定位浮标（Affix）。
由于各种加班,身心疲惫...
动画过渡
源文件：transition.js
使用的动画过渡效果全部使用了 CSS3的语法，所以IE6、IE7、IE8是不能用动画过渡效果。
默认带过渡效果的
- 模态弹窗（Modal）的滑动和渐变效果；
- 选项卡（Tab）的渐变效果；
- 警告框（Alert）的渐变效果；
- 旋转轮播（Carousel）的滑动效果。
源码
js源码
![[Bootstrap]7天深入Bootstrap(5)JavaScript插件 _ JavaClub全栈架构师技术笔记](https://www.javaclub.cn/zb_users/theme/tpure/style/images/lazyload.png "[Bootstrap]7天深入Bootstrap(5)JavaScript插件 _ JavaClub全栈架构师技术笔记")
function transitionEnd() {var el = document.createElement('bootstrap')var transEndEventNames = {WebkitTransition: 'webkitTransitionEnd',MozTransition: 'transitionend',OTransition: 'oTransitionEnd otransitionend',transition: 'transitionend'}for (var name in transEndEventNames) {if (el.style[name] !== undefined) {retu { end: transEndEventNames[name] }}}retu false // explicit for ie8 ( ._.)}
通过以上代码判断是否支持动画过渡效果。
CSS源码
.fade {opacity: 0; /*100%透明*/-webkit-transition: opacity .15s linear; /*透明度，匀速变化0.15秒*/transition: opacity .15s linear;}.fade.in { /*应用in样式，表示全部打开*/opacity: 1; /*完全不透明*/} .modal.fade .modal-dialog {-webkit-transition: -webkit-transform .3s ease-out; /*减速运行*/-moz-transition: -moz-transform .3s ease-out;-o-transition: -o-transform .3s ease-out;transition: transform .3s ease-out;-webkit-transform: translate(0, -25%); /*向下移动25%的距离，从而产生向下的 动画视觉*/-ms-transform: translate(0, -25%);transform: translate(0, -25%);}.modal.in .modal-dialog { /*页面完整显示时，回归到原始位置*/-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);transform: translate(0, 0);}
模态弹窗
源文件：modal.js
模态弹窗（也叫popup，Bootstrap里称为Modal）是绝大部分交互式网站都需要的一种功能，一般有以下几种用法：
- 提示信息、警告信息、大文本等；
- 确认提示（多按钮）；
- 显示表单元素（一般使用ajax操作等功能）；
- 其他需要特殊显示的信息（如单击缩略图时放大图片）。
使用
弹窗组件使用了3层 div容器元素，其分别应用了modal、modal-dialog、modalcontent样式。然后在真正的内容容器modal-content内包括了弹窗 的头（header）、内容（body）、尾（footer）3个部分，分别应用了3个样式：modal-header、modal-body、modal-footer。
使用data-target
<a href="#" class="btn btn-success" data-toggle="modal" data-target=".modal">启动模态框</a><div class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">Modal Title</div><div class="modal-body">This is body.</div><div class="modal-footer"><a href="#" class="btn btn-default" data-dismiss="modal">关闭</a><a href="#" class="btn btn-success">保存</a></div></div></div></div>
js会控制在弹出modal之前，会加一个.modal-backdrop 用来设为灰色背景。
下拉菜单
源文件：dropdown.js
一般下拉菜单都是在导航条（navbar）和选项卡（tab）上实现。
实现原理：
- 在网页加载的时候，对所有带有datatoggle="dropdown"样式的元素进行事件绑定。
- 用户单击带有data-toggle="dropdown"样式的链接或按钮时，触发JavaScript事件代码。
- Javascript事件代码在父容器（本例是：<li class="dropdown">）上加一个.open样式。
- 默认隐藏的.dropdown-menu菜单在外部有了.open样式后，即可显示出来，从而达到预期的效果。
使用：
- 菜单样式和菜单项保持一致（即按照第4节的要求编写）。
- 被单击的链接或者按钮上需要应用data-toggle="dropdown"样式，以便在初始化的时候JavaScript可以监控单击事件
使用data-target
<a href="#" class="btn btn-default" data-toggle="dropdown" data-target="#d">启动下拉框</a><div class="dropdown" id="d"><a href="#" class="btn btn-default" data-toggle="dropdown">启动下拉框</a><ul class="dropdown-menu"><li><a>菜单1</a></li><li><a>菜单2</a></li></ul></div>
滚动侦测
源文件：scrollspy.js
滚动侦测（ScrollSpy）插件是根据滚动的位置自动更新导航 条中相应的导航项
使用：
- 设置滚动容器，即在所要侦测的元素上设置data-target="#selector" data-spy="scroll"属性。
- 设置菜单链接容器，该容器的id（或样式）和data-target 属性所对应的选择符应一致。
- 在菜单容器内，必须有.nav样式的元素，并且在其内部有 li元素，li内包含的a元素才是可以侦测高亮的菜单链接，即符 合.nav li > a这种选择符的条件。
body上用data-spy
<body data-target="#selector" data-spy="scroll"><div id="selector"><nav class="navbar navbar-default navbar-fixed-top" role="navigation"><ul class="nav navbar-nav"><li class="active"><a href="#fat">@fat</a></li><li><a href="#mdo">@mdo</a></li><li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a><ul class="dropdown-menu"><li class=""><a href="#one">one</a></li><li class=""><a href="#two">two</a></li><li class="divider"></li><li class=""><a href="#three">three</a></li></ul></li></ul></nav></div><div style="overflow: auto"><h4 id="fat">@fat</h4><p>具体内容</p><h4 id="mdo">@mdo</h4><p>具体内容</p><h4 id="one">one</h4><p>具体内容</p><h4 id="two">two</h4><p>具体内容</p><h4 id="three">three</h4><p>具体内容</p></div><script src="Scripts/jquery-1.9.1.js"></script><script src="Scripts/bootstrap.js"></script></body>
注意：
子菜单虽然会高亮，但不会打开，为了展示效果，需要手 动打开下拉菜单查看。
该插件所需要的导航条只能在拥有.nav样式的ul/li元素上起 作用
选项卡
源文件：tab.js
就像我们平时使用的Windows操作系统里的选项卡设置一样，单击一个选项，下面就显示对应的选项卡面板
使用：
- 选项卡导航和选项卡面板要同时有（但不一定要放在一 起）。
- 导航链接里要设置data-toggle="tab"，并且还要设置data-target="选择符"（或href="选择符"），以便单击的时候能找到该选择符所对应的tab-pane面板。
- tab-pane要放在tab-content里面，要有id（或者CSS样式） 并与data-target="选择符"（或href="选择符"）一致
<ul class="nav nav-tabs"><li class="active"><a href="#home" data-toggle="tab">home</a> </li><li><a href="#concact" data-toggle="tab">concact</a> </li></ul><div class="tab-content"><div class="tab-pane active" id="home"><h3>Home</h3></div><div class="tab-pane" id="concact"><h3>concact</h3></div></div>
提示框
源文件：tooltip.js
鼠标移动到特定的元素上时，显示相关的提示语。类似于abbr的title功能，不过效果更加漂亮实用。
使用
- 指定的data-toggle="tooltip"属性
- 然后再定义要显示的内容,可以在title也可以用data-original-title
- js初始化.$('[data-toggle="tooltip"]').tooltip();
<a data-toggle="tooltip" class="btn btn-default" title="aaaa" data-placement="bottom">bbbb</a><script src="Scripts/jquery-1.9.1.js"></script><script src="Scripts/bootstrap.js"></script><script>$(function () {$('[data-toggle="tooltip"]').tooltip()})</script>
弹出框
源文件：popover.js
弹出框其实就是一种特殊的提示框，相比来说只是多了一个title标题而已
使用
（弹出框插件的用法和提示框组件几乎一模一样），唯一不一样的就是插件名称以及多余的content字段。而关于自动初始化，也和提示框插件一样，需要手动初始化
- 指定的data-toggle="popover"属性
- 然后再定义要显示的标题,可以在title也可以用data-original-title
- 定义内容，可以在content也可以data-content
- js初始化.$('[data-toggle=popover]').popover();
<a data-toggle="popover" class="btn btn-default" title="aaaa" data-content="ccccc" data-placement="bottom">bbbb</a>
警告框
源文件：alert.js
就是在警告框组件的基础上，提供了 单击x号关闭警告框的功能
使用
<div class="alert alert-danger"><h3>警告标题</h3><hr /><p>警告内容警告内容</p><p><button class="btn btn-default" data-dismiss="alert">关闭</button></p></div>
默认情况下，如果不设置data-target属性，则会关闭x号按钮元素所在的父元素容器，即外部的div元素。只需要保证设置了data-dismiss="alert"即可.
按钮
源文件：button.js
按钮插件提供了一组可以控制按钮多种状态的功能，比如，一个按钮有禁用状态、正在加载状态、正常状态等
使用
禁用状态在这里不再赘述。
正在加载和加载完成控制与显示
<a id="aa" href="#" class="btn btn-default" data-loading-text="正在加载..." data-complete-text="已完成">提交</a>$('#aa').dblclick(function() {$('#aa').button('loading');setTimeout(function () {$('#aa').button('complete');}, 2000);});$('#aa').click(function() {$('#aa').button('reset');});
折叠
源文件：collapse.js
当单击一个触发元素时，在另外一个可折叠区域进行显示（或隐藏），再次单击时可以反转显示状态。（经典的手风琴风格）
使用
<!-- 默认显示折叠区域--><a class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发改变</a><div id="demo" class="collapse in">折叠区域...</div>
<!-- 默认隐藏折叠区域--><button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">按钮</button><div id="demo" class="collapse ">折叠区域...</div>
轮播
源文件：carousel.js
旋转轮播（Carousel）这个插件有很多种译法，有人叫轮播，有人叫传送带
<div data-ride="carousel" class="carousel slide" id="carousel-container"><!-- 图片容器 --><div class="carousel-inner"> <div class="item"> <img alt="第一张图" src="A" /></div> <div class="item active"> <img alt="第二张图" src="B" /> </div> <div class="item"> <img alt="第三张图" src="C" /> </div></div><!-- 圆圈指示符 --><ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel-container"></li> <li data-slide-to="1" data-target="#carousel-container"></li> <li data-slide-to="2" data-target="#carousel-container" class="active"></li></ol><!-- 左右控制按钮 --><a data-slide="prev" href="#carousel-container" class="left carouselcontrol"> <span class="glyphicon glyphicon-chevron-left"></span> </a><a data-slide="next" href="#carousel-container" class="right carouselcontrol"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div>
带有data-ride="carousel"的div就是轮播插件的容器，容器id为carousel-container，稍后会用到。
还有两个样式，其中carousel样式做样式容器，而slide样式和fade类似，用来定义轮播图片的时候是否有特效.
- carousel-inner样式div内部包含多个含有item的div样式，在 这些内部的div里，定义我们要显示的幻灯图片。
- carousel-indicators样式ol内部定义了一组标示符，用户单 击这些标示符可以直接显示相应的图片,data-slide-to是索引,从0开始.
- 另外两个a链接是一组，用于显示左右箭头，可以改变轮播的方向。这两个元素上定义的data-slide属性值只能是 prev或者next
针对图片，轮播插件还提供了一个字幕说明样式（carousel-caption），紧接着img元素定义即可。示例如下
<div class="item active"><img src="..." alt="..." /><div class="carousel-caption"> <h3>标题</h3> <p>描述...</p></div> </div>
定位浮标
源文件：affix.js
Affix的效果就像其官方网站左边的导航链接一样。
<!—或者分开设置offset -- >
<div data-spy="affix" data-offset-top="60" data-offset-bottom="100" >导航内容 </div>
<!—合并设置offset -- >
<div data-spy="affix" data-offset="60" >导航内容</div>
data-offset-top表示一个完整的新网页，从顶部向下拖动滚动条（也就是网页向上滚动）这个像素以后,
而data-offset-bottom则表示距离最底部还有多少距离（本例60像素）以后，就要开始继续滚动了.
作者：Never、C
来源链接：https://www.cnblogs.com/neverc/p/4782637.html
版权声明：
1、JavaClub（https://www.javaclub.cn）以学习交流为目的，由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容，包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网，本站不享有版权，版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站（javaclubcn@163.com），我们将第一时间核实后及时予以删除。
