bootstrap-JavaScript插件

JavaScript插件

新版Bootstrap提供了12种JavaScript插件，分别是：动画过渡（Transition）、模态弹窗（Modal）、下拉菜单（Dropdown）、滚动侦测（Scrollspy）、提示框（Tooltip）、选项卡（Tab）、警告框（Alert）、弹出框（Popover）、按钮（Button）、折叠（Collapse）、旋转轮播（Carousel）、自动定位浮标（Affix）
下面就对此一一介绍

动画过渡效果

默认情况下，以下组件使用了动画过渡效果
* 模态弹窗（Modal）的滑动和渐变效果
* 选项卡（Tab）的渐变效果
* 警告框（Alert）的渐变效果
* 旋转轮播（Carousel）的滑动效果

模态弹窗是绝大部分交互式网站都需要的一种功能，一般有以下几种用法：
提示信息、警告信息、大文本等；
确认提示（多按钮）；
显示表单元素 ；
其他需要特使显示的信息

下拉菜单

在用户单击下拉菜单的链接或者小箭头时候，隐藏的菜单会弹出来，在HTML编写方面只要满足如下规则：
1、菜单样式和菜单项保持一致
2、被单击的链接或者按钮上需要应用data-toggle="dropdown"样式，以便在初始化的时候JavaScript可以监控单击事件。

用HTML写的时候只需要给按钮加上 class="dropdown-toggle" data-toggle=“dropdown” 再给ul加上dropdown-menu的类即可实现，如果要是使用js插件的话，就要在此基础上去掉 data-toggle=“dropdown”，在下面添加script代码就可以，script代码如下：

滚动侦测

概念

滚动侦测插件是根据滚动的位置自动更细导航条中相应的导航项。会将当前的内容在导航项里高亮显示出来。
注意：该插件所需要的导航条只能在拥有.nav样式的ul/li元素上起作用。

用法

在平时使用过程中，滚动侦测一般有两种用法，一种是固定一个元素的高度，进行滚动，然后对相应的菜单进行高亮显示；另外一种是对整个页面（body）进行滚动侦测。两种方法用法一样，都需要如下3个步骤：
1、设置滚动容器，即在所要侦测的元素上设置data-target="#selector" data-spy="scroll"属性
2、设置菜单链接容器，该容器的id（或样式）和data-target属性所对应的选择符应一致。
3、在菜单容器内，必须有.nav样式的元素，并且在其内部有li元素，li内包含的a元素才是可以侦测高亮的菜单链接，即符合.nav li>a 这种选择符的条件。
代码如下：

该代码还需要加上JS支撑，代码如下：

* $('body').scrollspy({ target:'#selector'})
*    $('[data-spy="scroll]').each(function(){
*   var $spy=$(this).scrollspy('refresh')
*  })

需要注意的是，这种refresh（用于获取页面内所有滚动容器的id值（也可以说是菜单对应的target值（或href））的集合，以及每个id元素的offset值）只对声明式用法有效，如果使用的是JavaScript方式，并且需要刷新DOM，那就需要重新应用该插件；或者从data-scrollspy属性上获取该实例，然后再调用refresh方法

结果这里就不再给出，回去读者可以自己编写尝试

选项卡

选项卡比较简单，在CSS组件里面便可以很轻松的实现这个功能，因此这里只给出选项卡组件的事件类型

弹出框

弹出框需要和按钮之类的配合使用，按钮的主体部分编写很简单，即：<button class="btn btn-danger btn-lg">Click to toggle popover</button>
JS部分为

该代码的运行结果为：（点击了按钮之后）

提示框

概念

一般来说提示框是鼠标移动到特定的元素上时显示相关的提示语。
不管是href链接还是按钮，只要按照特定的规则设置，就可以在鼠标移动的时候显示提示语。

属性

提示框组件的声明式属性：（js用法属性直接给去掉data即可）

注意：
在.btn-group或.input-group内的元素上使用tooltip（提示内容 ）时，需要指定container:'body'选项，以避免不必要的副作用（例如，当tooltip显示之后，与其相关的页面元素可能变得更宽或去圆角）。为了给disabled或.disabled元素添加tooltip，将需要增加tooltip的页面元素包裹在一个<div>中，然后对这个<div>元素应用tooltip。

代码

基本代码如下：

* <a href="#" data-toggle="tooltip" title="这是内容">链接</a>
* <a href="#" data-toggle="tooltip" title="也可设置title">链接</a>

支撑它的JS为：
最简单的一种就是：

结果

在浏览器运行的结果为

与弹出框区别

1、提示框的默认触发事件是hover和focus。而弹出框的默认触发事件是click
2、提示框只有一个内容（即title），而弹出框不仅可以设置标题title，还可以设置内容

两个插件的模板如下：

警告框

就是在警告框自建的基础上，提供了单击×号关闭警告框的功能。

按钮

按钮插件的声明式用法支持3种元素，分别是按钮、复选框、单选

多选单选

结果为：（第一个是多选，第二个是单选）

状态反转

还有另外一种有趣的按钮功能（状态反转），该功能现在只能通过js来实现，因为bootstrap里面已经把这个去掉了
代码实现如下：

结果如下：

折叠

折叠插件实现的效果是：当单击一个触发元素时，在另外一个折叠区域进行显示（或隐藏），再次单击时可以反转显示状态。经典的场景是多个折叠区域的手风琴风格（accordion）,以及单一的title/content的风格
实现代码如下：

大致效果为：

旋转轮播

这个插件有很多译法，有人叫轮播。有人叫传送带，主要显示效果就像各大网站的多幅滚动广告一样。

用法

需要特别说明的是，ol指示符元素在三个部分的位置可以任意定义，左右控制链接（3）可以放在ol前面，也可以放在ol后面，但是千万不能放在carousel-inner样式div的前面（会被其遮住）

针对图片，轮播插件还提供了一个字幕说明样式（carousel-caption），紧接着img元素定义即可。

当然也可以用JS写这样的效果，这样比较灵活一点
代码为：

* $('.carousel').carousel({'interval': '5000',});
* $('#leftbtn').click(function(){
*     $('.carousel').carousel('prev');
* });
* $('#rightbtn').click(function(){    
*    $('.carousel').carousel('next');
* });
* $('.num').click(function(){
* index=$(this).index('.num');
* $('.carousel').carousel(index);
* });
* $('[data-toggle="tooltip]').tooltip()

效果图为：

如果不点图中的按钮，则每隔5秒回轮播一次。

其他用法

除了data-ride=”carousel”、data-slide、data-slide-to以外，轮播组件还支持其他3个自定义属性，

如果没有data-ride=“carousel”属性，可以使用JavaScript代码来触发这个行为。用法如下：

1 2	$('.carousel').carousel(); /*所有带carousel样式的容器元素都开启轮播*/ $('.carousel').carousel({'interval': '5000', });/*5秒轮播一次*/

###事件
该插件只提供两种事件类型.

自动定位浮标

自动定位浮标（Affix）效果就像bootstrap官方网站左边的导航链接一样（注意不是菜单的高亮和自动展示功能），功能如下：

• 1、在顶部的时候该菜单和第二部分的蓝色部分可以一起向上滚动
• 2、一旦蓝色的部分滚动完毕，该菜单导航就固定在左边不动了。其效果就像浮标一样。

解析代码：

基本效果如下所示：