深入理解BootStrap -- js插件概览(API)18

1、Bootstrap 插件概览

在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况被触发。

2、导入JavaScript插件

Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。

Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。

一次性导入：

​​bootstrap.js​​（压缩版本：​​bootstrap.min.js​​）。

<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>

单独导入：

为方便单独导入特效文件，Bootstrap V3.2中提供了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”

上述单独插件的下载可到github去下载（​​https://github.com/twbs/bootstrap​​）。

下载后可查看js文件夹，如下图：

3、data 属性

​​data​​​​data​​ 属性 API 的方法，即解除以 ​​data-api​​

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

​​data-api​​

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

4、编程方式的 API

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

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

所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为），如下所示：

// 初始化为默认行为
$("#myModal").modal()    
 // 初始化为不支持键盘               
$("#myModal").modal({ keyboard: false })  
// 初始化并立即调用 show
$("#myModal").modal('show')

​​$.fn.popover.Constructor​​。如果您想获取某个特定插件的实例，可以直接通过页面元素获取：

$('[rel=popover]').data('popover').

5、避免命名空间冲突

​​.noConflict​​

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict() 
// 为 $().bootstrapBtn 赋予 Bootstrap 功能                         
$.fn.bootstrapBtn = bootstrapButton

6、事件

Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说，这些事件有两种形式： 

动词不定式：这会在事件开始时被触发。例如 ​​ex: show​​。动词不定式事件提供了 ​​preventDefault​​

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

​​ex: shown​​。