巅峰霸主 > 在线帮助文档 > bootstrap4.5文档 > JavaScript

bootstrap JavaScript使用和相关详细说明

时间:2020-04-06 14:02:34  来源:巅峰霸主  作者:烈火大地 点击:
摘要:bootstrap基于jQuery构建的可选JavaScript插件,关于依赖关系,数据属性和程序化api详细说明,可单独编译,也可直接使用压缩后的插件应用于项目之中……

借助bootstrap基于jQuery构建的可选JavaScript插件,使Bootstrap更有活力。了解每个插件,数据和程序化API选项以及更多信息。

单独编译

插件可以单独使用(使用Bootstrap的personal js/dist/*.js),也可以同时使用bootstrap.js或压缩的插件bootstrap.min.js(不包括二者)。

如果使用捆绑器(Webpack,汇总…),则可以使用/js/dist/*.jsUMD就绪的文件。

依赖关系

一些插件和CSS组件依赖于其他插件。如果您单独包含插件,请确保在文档中检查这些依赖性。还要注意,所有插件都依赖jQuery(这意味着jQuery必须在插件文件之前包含jQuery )请咨询我们,package.json以了解支持哪些版本的jQuery。

bootstrap4.4.1的下拉菜单,弹出窗口和工具提示也依赖于于Popper.js

数据属性

几乎所有的Bootstrap插件都可以通过带有数据属性的HTML单独启用和配置(我们使用JavaScript功能的首选方式)。确保仅在单个元素上使用一组数据属性(例如,您无法从同一按钮触发工具提示和模式。)

但是,在某些情况下,可能需要禁用此功能。要禁用数据属性API,请取消绑定名称空间上的所有事件,data-api如下所示:

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

另外,要定位特定的插件,只需将插件的名称作为名称空间以及data-api名称空间包括在内,如下所示:

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

选择器

当前querySelector,querySelectorAll由于性能原因,我们使用本地方法来查询DOM元素,因此您必须使用有效的选择器。例如,如果使用特殊选择器,请collapse:Example确保将其转义。

事件

Bootstrap为大多数插件的唯一操作提供自定义事件。通常它们以不定式和过去分词形式出现-在show事件开始时触发不定式(ex.show),而shown在动作完成时触发其过去分词形式(ex.show)。

所有不定式事件均提供preventDefault()功能。这提供了在动作开始之前停止执行的能力。从事件处理程序返回false也会自动调用preventDefault()。

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

程序化api

我们还相信您应该能够完全通过JavaScript API使用所有Bootstrap插件。所有公共API都是单个可链接的方法,并返回所作用的集合。

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

所有方法都应接受可选的options对象,以特定方法为目标的字符串或不包含任何内容(以默认行为启动插件):

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

每个插件还向Constructor属性公开其原始构造函数:$.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

版本号

每个Bootstrap jQuery插件的版本都可以通过VERSION该插件的构造函数的属性进行访问。例如,对于工具提示插件:

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

禁用JavaScript时没有特殊的异常

当禁用JavaScript时,Bootstrap的插件不会特别优雅地回退。如果您在这种情况下关心用户体验,请使用<noscript>来向用户解释这种情况(以及如何重新启用JavaScript),和/或添加您自己的自定义后备广告。

第三方库

Bootstrap不正式支持 Prototype或jQuery UI等第三方JavaScript库。尽管.noConflict有事件和命名空间事件,但可能仍需要自己解决兼容性问题。

实用程序

所有Bootstrap的JavaScript文件都依赖于util.js该文件,并且必须将其与其他JavaScript文件一起包含。如果您使用的是已编译的(或压缩的)bootstrap.js,则无需包含它-它已经存在。

util.js包括实用程序功能和transitionEnd事件的基本帮助器,以及CSS过渡模拟器。其他插件使用它来检查CSS过渡支持并捕获挂起的过渡。

清理工具

工具提示和弹出窗口使用我们内置的清理工具来清理接受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)而想绕过我们的消毒剂,则应执行以下操作:

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


(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部