Bootstrap 通过JS调用插件

标签: Bootstrap 起步

学习基于jQuery的Bootstrap插件。了解关于插件的一切,data,api参数等。


分离存储 或 打包到一起

  • 插件可以单独分离(js/dist/*.js
  • 也可以全部编译到bootstrap.js 或 压缩版bootstrap.min.js 中。

如果你使用打包器(Webpack, Rollup…),可以把文件放入到  /js/dist/*.js

依赖

一些插件和CSS组件依赖于其他插件。如果你分离存储请务必确保依赖项在文档中。另外请记住所有插件都基于jQuery(这意味着必须在插件前引用jQuery)。参阅package.json 了解我们支持的jQuery版本。

另外 dropdowns, popovers 和 tooltips 依赖于Popper.js.

Data attributes

几乎所有Bootstrap 插件可以通过HTML data attributes启用和配置 (不过我们推荐使用js函数方式)。确保在单一元素只使用一组 data attributes(例如,你不能用一个按钮同时触发tooltip或模态窗口)。

然而,在某些场景下你也许会希望禁用这个功能。要禁用data-api,请取消绑定文档命名空间上的所有事件,如下所示:

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

或者只想禁用指定插件,只需在参数前填入插件名,像这样:

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

选择器

当前查询元素我们使用的原生方法querySelectorquerySelectorAll 以追求最好的性能,所以请使用标准的选择器 。不要使用collapse:Example 等非标准选择器。

事件

Bootstrap大多数插件提供特定的自定义事件。

通常它们以不定式和过去分词形式出现 , 其中不定式(例如show)在事件开始时触发,其过去分词形式(例如shown)在动作完成时触发。

所有不定式事件都提供preventDefault() 函数。允许你在动作开始之前手动停止。回调函数返回false也会自动调用preventDefault()

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) {
    return e.preventDefault() // stops modal from being shown
  }
})

代码调用 API

所有插件都支持纯JS代码调用。所有API都是单一的链式函数。

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

所有函数都支持接受一个参数对象,一个特定方法的字符串,或者什么都不传(默认行为)

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

每个插件都暴露了原始构造器属性:

$.fn.popover.Constructor.

如果你还想获得特定插件实例,可以通过元素直接访问:

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

异步和回调

所有函数API都是异步的,你可以通过监听事件处理操作完成后的逻辑。

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

组件过度完成前的重复调用将被忽略。

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

默认设置

你可以通过插件的Constructor.Default 修改默认设置:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.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

版本号

每个插件都可以通过构造器获取版本号:

$.fn.tooltip.Constructor.VERSION // => "4.3.1"

禁用JavaScript

JS被禁用时Bootstrap没有特殊处理 ,这时候需要你自己取处理。

Util

所有Bootstrap的JS文件都依赖util.js ,它必须与其他js文件一起包含在内。如果你使用bootstrap.js 已经包含它,不用在处理 。

Sanitizer

Tooltips 和 Popovers使用我们内建的sanitizer来清理HTML选项。

默认whiteList值如下:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

如果要将新值添加到whiteList可以执行以下操作:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

如果你更喜欢使用专用库(例如DOMPurify)来绕过我们的sanitizer,则可以执行以下操作:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

本文由 巨应教程  原创出品,转载请标明出处。