data-toggle属性如何工作？ （它的API是什么？） [英] How does the data-toggle attribute work? (What's its API?)

问题描述

Bootstrap使用名为 data-toggle 的自定义属性。这个功能如何表现？使用它需要Bootstrap的JavaScript库吗？此外，还有哪些数据切换选项可用。到目前为止，我数了

Bootstrap uses a custom attribute named data-toggle. How does this feature behave? Does using it require Bootstrap's JavaScript library? Also, which data-toggle options are available. So far, I count

• 折叠


• tab


• modal


• 下拉列表

• collapse
• tab
• modal
• dropdown

每个都做了什么？

TLDR; bootstrap的自定义数据切换属性的API是什么？

TLDR; What's the API for bootstrap's custom data-toggle attribute?

推荐答案

我认为你对自定义数据属性的目的有点困惑。来自 w3 spec

I think you are a bit confused on the purpose of custom data attributes. From the w3 spec

自定义数据属性用于存储页面或应用程序专用的自定义数据，没有更合​​适的属性或元素。

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

本身属于 data-toggle =值基本上是一个键值对，其中键是数据切换，值是值。

By itself an attribute of data-toggle=value is basically a key-value pair, in which the key is "data-toggle" and the value is "value".

In在Bootstrap的上下文中，如果没有JavaScript库包含的数据上下文，属性中的自定义数据几乎无用。如果你看一下 bootstrap.js 然后你可以搜索数据切换并找到它的使用方式。

In the context of Bootstrap, the custom data in the attribute is almost useless without the context that their JavaScript library includes for the data. If you look at the non-minified version of bootstrap.js then you can do a search for "data-toggle" and find how it is being used.

这是一个Bootstrap JavaScript的例子我直接从文件中复制的关于使用data-toggle的代码。

Here is an example of Bootstrap JavaScript code that I copied straight from the file regarding the use of "data-toggle".

• 按钮切换
  

• Button Toggle

Button.prototype.toggle = function () {
  var changed = true
  var $parent = this.$element.closest('[data-toggle="buttons"]')

  if ($parent.length) {
    var $input = this.$element.find('input')
    if ($input.prop('type') == 'radio') {
      if ($input.prop('checked') && this.$element.hasClass('active')) changed = false
      else $parent.find('.active').removeClass('active')
    }
    if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
  } else {
    this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
  }

  if (changed) this.$element.toggleClass('active')

}

代码提供的上下文显示Bootstrap正在使用 data-toggle 属性作为自定义查询选择器来处理特定元素。

The context that the code provides shows that Bootstrap is using the data-toggle attribute as a custom query selector to process the particular element.

从我看到的这些是数据 - 切换选项：

From what I see these are the data-toggle options:

• 折叠


• 下拉列表


• 模态


• tab


• pill


• button（s）

• collapse
• dropdown
• modal
• tab
• pill
• button(s)

您可能需要查看 Bootstrap JavaScript文档以获取更详细的说明，但基本上 data-toggle 属性将元素切换为活动状态。

You may want to look at the Bootstrap JavaScript documentation to get more specifics of what each do, but basically the data-toggle attribute toggles the element to active or not.

这篇关于data-toggle属性如何工作？ （它的API是什么？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！