Bootstrap 插件概览

在前面 布局组件 章节中所评论到的组件只是是个开端。Bootstrap 自带 12 种 jQuery 插件,扩展了功用,能够给站点增加更多的互动。即便您不是一名高档的 JavaScript 开发人员,您也能够着手学习 Bootstrap 的 JavaScript 插件。运用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件能够在不编写任何代码的状况被触发。

站点引证 Bootstrap 插件的办法有两种:

  • 独自引证:运用 Bootstrap 的单个的 *.js 文件。一些插件和 CSS 组件依靠于其他插件。假如您独自引证插件,请先保证弄请这些插件之间的依靠联系。
  • 编译(一同)引证:运用 bootstrap.js 或压缩版的 bootstrap.min.js
    不要测验一同引证这两个文件,由于 bootstrap.jsbootstrap.min.js 都包含了一切的插件。
一切的插件依靠于 jQuery。所以必须在插件文件之前引证 jQuery。请拜访 检查 Bootstrap 当时支撑的 jQuery 版别。

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")

一切的办法都能够承受一个可选的选项目标作为参数,或许一个代表特定办法的字符串,或许不带任何参数(这种状况下,将会初始化插件为默许行为),如下所示:

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

每个插件在 Constructor 特点上也暴露了其原始的结构函数:$.fn.popover.Constructor。假如您想获取某个特定插件的实例,能够直接经过页面元素获取:

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

防止命名空间抵触

某些时分 Bootstrap 插件或许需求与其他 UI 结构一同运用。在这种状况下,或许会发作命名空间抵触。假如不幸发作了这种状况,你能够经过调用插件的 .noConflict 办法康复其原始值。

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

事情

Bootstrap 为大多数插件的共同行为供给了自定义事情。一般来说,这些事情有两种方式:

  • 动词不定式:这会在事情开端时被触发。例如 ex: show。动词不定式事情供给了 preventDefault 功用。这使得在事情开端前能够中止操作的履行。
    $('#myModal').on('show.bs.modal', function (e) {
    // 阻挠模态框的显现
      if (!data) return e.preventDefault() 
    })
    
  • 过去分词方式:这会在动作履行完毕之后被触发。例如 ex: shown