jQuery Twitter Bootstrap 中的数据切换属性

The data-toggle attributes in Twitter Bootstrap

提问by

What does data-toggleattributes do in Twitter Bootstrap? I couldn't find an answer in Bootstrap API.

是什么data-toggle属性中Twitter的引导呢？我在 Bootstrap API 中找不到答案。

I have seen a similar question before as well, link. But it didn't help me much.

我之前也看到过类似的问题，链接。但这对我没有多大帮助。

采纳答案by epascarello

It is a HTML5 data attribute that automatically hooks up the element to the type of widget it is.

它是一个 HTML5 数据属性，可自动将元素连接到它的小部件类型。

Some Examples:

一些例子：

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

Go through the JavaScript docsand search for data-toggle and you will see it used in the code examples.

浏览JavaScript 文档并搜索 data-toggle，您将看到它在代码示例中使用。

One working example:

一个工作示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>

回答by Shauna

Any attribute that starts with data-is the prefix for custom attributes used for some specific purpose (that purpose depends on the application). It was added as a semantic remedy to people's heavy use of reland other attributes for purposes other than their original intended purposes (relwas often used to hold data for things like advanced tooltips).

任何以 开头的data-属性都是用于某些特定目的的自定义属性的前缀（该目的取决于应用程序）。它被添加为一种语义补救措施，以解决人们rel出于原始预期目的以外的目的（rel通常用于保存诸如高级工具提示之类的数据）而大量使用和其他属性的情况。

In the case of Bootstrap, I'm not familiar with its inner workings, but judging from the name, I'd guess it's a hook to allow toggling of the visibility or perhaps a mode of the element it's attached to (such as the collapsable side bar on Octopress.org).

在 Bootstrap 的情况下，我不熟悉它的内部工作原理，但从名称来看，我猜它是一个钩子，允许切换可见性或者它所附加的元素的模式（例如可折叠Octopress.org 上的侧边栏）。

html5doctor has a good article on the data- attribute.

html5doctor 有一篇关于 data- 属性的好文章。

Cycle 2 is another example of extensive use of the data- attribute.

Cycle 2 是另一个广泛使用 data- 属性的例子。

回答by shikarii

For example, say you were creating a web application to list and display recipes. You might want your customers to be able to sort the list, display features of the recipes, and so on before they choose the recipe to open. In order to do this, you need to associate things like cooking time, primary ingredient, meal position, and so on right inside the list elements for the recipes.

例如，假设您正在创建一个 Web 应用程序来列出和显示食谱。您可能希望您的客户在选择要打开的食谱之前能够对列表进行排序、显示食谱的功能等。为此，您需要将诸如烹饪时间、主要成分、进餐位置等内容直接关联到食谱的列表元素中。

<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>

In order to get that information into the page, you could do many different things. You could add comments to each LI element, you could add rel attributes to the list items, you could place all the recipes in separate folders based on time, meal, and ingredient (i.e. ). The solution that most developers took was to use class attributes to store information about the current element. This has several advantages:

为了使该信息进入页面，您可以做许多不同的事情。您可以为每个 LI 元素添加注释，您可以向列表项添加 rel 属性，您可以根据时间、膳食和成分（即）将所有食谱放在单独的文件夹中。大多数开发人员采用的解决方案是使用类属性来存储有关当前元素的信息。这有几个优点：

• You can store multiple classes on an element
• The class names can be human readable
• It's easy to access classes with JavaScript (className)
• The class is associated with the element it's on

• 您可以在一个元素上存储多个类
• 类名可以是人类可读的
• 使用 JavaScript (className) 访问类很容易
• 该类与其所在的元素相关联

But there are some major drawbacks to this method:

但是这种方法有一些主要的缺点：

• You have to remember what the classes do. If you forget or a new developer takes over the project, the classes might be removed or changed without realizing that that affects how the application runs.
• Classes are also used for styling with CSS, and you might duplicate CSS classes with data classes by mistake, ending up with strange styles on your live pages.
• It's more difficult to add on multiple data elements. If you have multiple data elements, you need to access them in some way with your JavaScript, either by the name of the class or the position in the class list. But it's easy to mess up.

• 你必须记住这些类是做什么的。如果您忘记或新开发人员接管了该项目，则可能会删除或更改这些类，而没有意识到这会影响应用程序的运行方式。
• 类也用于使用 CSS 设置样式，您可能会错误地将 CSS 类与数据类重复，从而在您的实时页面上产生奇怪的样式。
• 添加多个数据元素更加困难。如果您有多个数据元素，则需要使用 JavaScript 以某种方式访问​​它们，或者通过类名或在类列表中的位置。但是很容易搞砸。

All the other methods I suggested had these problems as well as others. But since it was the only way to quickly and easily include data, that's what we did. HTML5 Data Attributes to the Rescue

我建议的所有其他方法都有这些问题以及其他问题。但由于这是快速轻松地包含数据的唯一方法，我们就是这样做的。救援的 HTML5 数据属性

HTML5 added a new type of attribute to any element—the custom data element (data-*). These are custom (denoted by the *) attributes that you can add to your HTML elements to define any type of data you want. They consist of two parts:

HTML5 为任何元素添加了一种新的属性类型——自定义数据元素 (data-*)。这些是自定义（用 * 表示）属性，您可以将它们添加到 HTML 元素以定义所需的任何类型的数据。它们由两部分组成：

Attribute Name This is the name of the attribute. It must be at least one lowercase character and have the prefix data-. For example: data-main-ingredient, data-cooking-time, data-meal. This is the name of your data.

属性名称 这是属性的名称。它必须至少是一个小写字符并具有前缀 data-。例如：数据-主料、数据-烹饪时间、数据-膳食。这是您的数据的名称。

Attribute Vaule Like any other HTML attribute, you include the data itself in quotes separated by an equal sign. This data can be any string that is valid on a web page. For example: data-main-ingredient="chocolate".

属性值 与任何其他 HTML 属性一样，您将数据本身包含在由等号分隔的引号中。此数据可以是网页上有效的任何字符串。例如：data-main-ingredient="chocolate"。

You can then apply these data attributes to any HTML element you want. For example, you could define the information in the example list above:

然后，您可以将这些数据属性应用于您想要的任何 HTML 元素。例如，您可以定义上面示例列表中的信息：

<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>

Once you have that information in your HTML, you will be able to access it with JavaScript and manipulate the page based on that data.

一旦在 HTML 中包含该信息，您就可以使用 JavaScript 访问它并根据该数据操作页面。

回答by Dan

From the Bootstrap Docs:

来自Bootstrap 文档：

<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a 
controller element, like a button, along with a data-target="#foo" or href="#foo" 
to target a specific modal to toggle.-->

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

回答by Akshay Vijay Jain

So many answers have been given, but they don't get to the point. Let's fix this.

已经给出了很多答案，但都没有切中要害。让我们解决这个问题。

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

To the point

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

到点

1. Any attribute starting with data-is not parsed by the HTML5 parser.
2. Bootstrap uses the data-toggleattribute to create collapse functionality.

1. 任何以 开头的属性data-都不会被 HTML5 解析器解析。
2. Bootstrap 使用该data-toggle属性来创建折叠功能。

How to use: Only 2 Steps

使用方法：只需两步

1. Add class="collapse"to the element #Ayou want to collapse.
2. Add data-target="#A"and data-toggle="collapse".

1. 添加class="collapse"到#A要折叠的元素。
2. 添加data-target="#A"和data-toggle="collapse"。

Purpose: the data-toggleattribute allows us to create a control to collapse/expand a div(block) if we use Bootstrap.

目的：如果我们使用 Bootstrap，该data-toggle属性允许我们创建一个控件来折叠/展开div（块）。

回答by shawnlg

The purpose of data-toggle in bootstrap is so you can use jQuery to find all tags of a certain type. For example, you put data-toggle="popover" in all popover tags and then you can use a JQuery selector to find all those tags and run the popover() function to initialize them. You could just as well put class="myPopover" on the tag and use the .myPopover selector to do the same thing. The documentation is confusing, because it makes it appear that something special is going on with that attribute.

bootstrap 中 data-toggle 的目的是让您可以使用 jQuery 查找某种类型的所有标签。例如，您将 data-toggle="popover" 放在所有 popover 标签中，然后您可以使用 JQuery 选择器查找所有这些标签并运行 popover() 函数来初始化它们。您也可以将 class="myPopover" 放在标签上并使用 .myPopover 选择器来做同样的事情。该文档令人困惑，因为它使该属性看起来有些特殊。

This

这个

<div class="container">
    <h3>Popover Example</h3>
    <a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
    <a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>

<script>
    $(document).ready(function(){
        $('.myPop').popover();   
    });
</script>

works just fine.

工作得很好。

回答by Gregor

The presence of this data-attribute tells Bootstrap to switch between visual or a logical states of another element on user interaction.

此数据属性的存在告诉 Bootstrap 在用户交互时在另一个元素的视觉或逻辑状态之间切换。

It is used to show modals, tab content, tooltips and popover menus as well as setting a pressed-state for a toggle-button. It is used in multiple ways without a clear documentation.

它用于显示模态、选项卡内容、工具提示和弹出菜单以及为切换按钮设置按下状态。它以多种方式使用，没有明确的文档。

回答by Amrendra

It is a Bootstrap defined HTML5 data attribute. It binds a button to an event.

它是 Bootstrap 定义的 HTML5 数据属性。它将按钮绑定到事件。

回答by pebox11

Hereyou can also find more examples for values that data-togglecan have assigned. Just visit the page and then CTRL+Fto search for data-toggle.

您还可以在此处找到更多data-toggle可分配值的示例。只需访问该页面，然后CTRL+F搜索data-toggle.

回答by Rel

Bootstrap leverages HTML5 standards in order to access DOM element attributes easily within javascript.

Bootstrap 利用 HTML5 标准，以便在 javascript 中轻松访问 DOM 元素属性。

data-*

数据-*

Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access to them.

形成一类称为自定义数据属性的属性，允许在 HTML 及其 DOM 表示之间交换可由脚本使用的专有信息。所有这些自定义数据都可以通过设置属性的元素的 HTMLElement 接口获得。HTMLElement.dataset 属性允许访问它们。

Reference

参考