Javascript Twitter引导中的数据切换属性

数据切换

属性在Twitter引导中起什么作用？我在引导API中找不到答案

我以前也见过类似的问题。

---

但是它对我帮助不大。

它是一个引导数据属性，可以自动将元素连接到它所属的小部件类型。Data-*是html5规范的一部分，数据切换是特定于引导的

一些例子：

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

浏览并搜索数据切换，您将在代码示例中看到它的使用

一个工作示例：

它是一个引导定义的HTML5数据属性。它将按钮绑定到事件。

此数据属性的存在告诉引导程序在用户交互时在另一个元素的可视或逻辑状态之间切换

---

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

任何以

数据-

开头的属性都是用于某些特定用途的自定义属性的前缀（该用途取决于应用程序）。它被添加为一种语义补救措施，用于人们大量使用

rel

和其他属性以达到其原始目的以外的目的（

rel

通常用于保存高级工具提示之类的数据）

在Bootstrap的例子中，我不熟悉它的内部工作原理，但从名称来看，我猜它是一个允许切换可见性的钩子，或者它所连接的元素的模式（例如可折叠的侧栏）

.

从

发射模态

例如，假设您正在创建一个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>

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

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

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

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

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

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

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

属性值 与任何其他HTML属性一样，可以将数据本身包含在引号中，并用等号分隔。此数据可以是网页上有效的任何字符串。例如：data main Component=“巧克力”

然后，可以将这些数据属性应用于所需的任何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>

---

一旦HTML中有了这些信息，就可以使用JavaScript访问这些信息，并根据这些数据操作页面

您还可以找到更多关于

数据切换

可以指定的值的示例。只需访问该页面，然后

CTRL+F

搜索

数据切换

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

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

---

已经给出了这么多答案，但都没有说到点子上。让我们来解决这个问题

切中要害

任何属性

<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>

<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>