Bootstrap插件概述

前面的话

　　Bootstrap除了包含丰富的Web组件之外，如下拉菜单、按钮组、导航、分页等，还包括一些JavaScript的插件。插件为 Bootstrap 的组件赋予了“生命”。Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。本文将介绍Bootstrap插件概述

 

导入

【一次性导入】

　　Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）

【单独导入】

　　为方便单独导入特效文件，Bootstrap提供了12种JavaScript插件，他们分别是：

　　☑ 动画过渡（Transitions）:对应的插件文件“transition.js”

　　☑ 模态弹窗（Modal）:对应的插件文件“modal.js”

　　☑ 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”

　　☑ 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”

　　☑ 选项卡（Tab）：对应的插件文件“tab.js”

　　☑ 提示框（Tooltips）：对应的插件文件“tooltop.js”

　　☑ 弹出框（Popover）：对应的插件文件“popover.js”

　　☑ 警告框（Alert）：对应的插件文件“alert.js”

　　☑ 按钮（Buttons）：对应的插件文件“button.js”

　　☑ 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”

　　☑ 图片轮播Carousel：对应的插件文件“carousel.js”

　　☑ 自动定位浮标Affix：对应的插件文件“affix.js”

 

data属性

　　可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是首选方式。

　　话又说回来，在某些情况下可能需要将此功能关闭。因此，还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：

$(document).off('.data-api')

　　另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：

$(document).off('.alert.data-api')

 

API

　　Bootstrap为所有插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合，和jQuery的调用形式一致

$('.btn.danger').button('toggle').addClass('fat')

　　所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）

$('#myModal').modal()                      // 以默认值初始化
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // 初始化后立即调用 show 方法

　　每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')

【默认设置】

　　每个插件都可以通过修改其自身的 Constructor.DEFAULTS 对象从而改变插件的默认设置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

【避免命名空间冲突】

　　某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果不幸发生了这种情况，可以通过调用插件的 .noConflict 方法恢复其原始值

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

【事件】

　　Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词(如shown)表示在动作执行完毕之后被触发。

　　所有 Bootstrap 事件的名称都采用命名空间方式。所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予在动作开始执行前将其停止的能力

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // 阻止模态框的展示
})

 

过渡效果

　　Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：

　　☑ 调用统一编译的bootstrap.js；

　　☑ 调用单一的过渡动画的JavaScript插件文件transition.js

　　transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果

　　默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

　　☑ 模态弹出窗（Modal）的滑动和渐变效果；

　　☑ 选项卡（Tab）的渐变效果；

　　☑ 警告框（Alert）的渐变效果；

　　☑ 图片轮播（Carousel）的滑动效果

　　transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果

　　通过下面的代码可以在全局范围禁用过渡效果，并且必须将此代码放在transition.js(或bootstrap.js或bootstrap.min.js)后面，确保在js文件加载完毕后再执行下面代码

$.support.transition = false