zoukankan      html  css  js  c++  java
  • JavaScript 插件 概览

    概览

    单个还是全部引入

    JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js)。

    建议使用压缩版的 JavaScript 文件

    bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。

    插件之间的依赖关系

    某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系。注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

    data 属性

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

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

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

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

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

    Only one plugin per element via data attributes

    Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.

    编程方式的 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 )表示在动作执行完毕之后被触发。

    从 3.0.0 版本开始,所有 Bootstrap 事件的名称都采用命名空间方式。

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

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

    版本号

    每个 Bootstrap 的 jQuery 插件的版本号都可以通过插件的构造函数上的 VERSION 属性获取到。例如工具提示框(tooltip)插件:

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

    未对禁用 JavaScript 的浏览器提供补救措施

    Bootstrap 插件未对禁用 JavaScript 的浏览器提供补救措施。如果你对这种情况下的用户体验很关心的话,请添加 <noscript> 标签向你的用户进行解释(并告诉他们如何启用 JavaScript),或者按照你自己的方式提供补救措施。

    第三方工具库

    Bootstrap 官方不提供对第三方 JavaScript 工具库的支持,例如 Prototype 或 jQuery UI。除了 .noConflict 和为事件名称添加命名空间,还可能会有兼容性方面的问题,这就需要你自己来处理了。

  • 相关阅读:
    303. Range Sum Query
    【Leetcode】292. Nim Game
    【c++】函数默认参数
    [err]default argument given for parameter 3 of '***'
    [err]multiple definition of `***'
    【leetcode】290. Word Pattern
    【leetcode】283. Move Zeroes
    【leetcode】278. First Bad Version
    【leetcode】268. Missing Number
    【leetcode】263. Ugly Number
  • 原文地址:https://www.cnblogs.com/xiewangfei123/p/12271944.html
Copyright © 2011-2022 走看看