推特引导中的数据切换属性

data-toggle属性在Twitter Bootstrap中做什么?我在Bootstrap API中找不到答案。

我以前也见过一个类似的问题，链接。

439648 次浏览
小开
最佳答案

它是一个Bootstrap数据属性，自动将元素与它所在的小部件类型挂钩。Data-*是html5规范的一部分，Data- toggle是Bootstrap特有的。

一些例子:

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

浏览引导JavaScript文档并搜索data-toggle，你会在代码示例中看到它的使用。

一个工作示例:

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

小开

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

小开

这个data-属性的存在告诉Bootstrap在用户交互时在另一个元素的可视或逻辑状态之间切换。

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

小开

任何以data-开头的属性都是用于某些特定目的(该目的取决于应用程序)的自定义属性的前缀。它被添加为一种语义补救措施，以弥补人们大量使用rel和其他属性来实现其最初预期目的以外的目的(rel通常用于保存高级工具提示等数据)。

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

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

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

小开

从引导文档:

<!--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>
小开

例如，假设您正在创建一个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很容易访问类(className)
  • 类与它所在的元素相关联

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

  • 你必须记住这些类是做什么的。如果您忘记了或者新的开发人员接管了项目，这些类可能会被删除或更改，而没有意识到这会影响应用程序的运行方式。
  • 类也用于CSS的样式化，您可能会错误地将CSS类与数据类重复，最终在活动页面上使用奇怪的样式。
  • 添加多个数据元素更加困难。如果有多个数据元素，则需要使用JavaScript以某种方式访问它们，可以是类名，也可以是类列表中的位置。但是很容易搞砸。
我建议的所有其他方法都有这些问题。但由于这是快速而简单地包含数据的唯一方法，所以我们就这么做了。 HTML5 Data Attributes to the Rescue

. html

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

< p >属性名称 这是属性的名称。必须至少有一个小写字符，并且前缀为data-。例如:数据-主要成分，数据-烹饪时间，数据-餐。这是你的数据的名字。

< p >属性值 与任何其他HTML属性一样，数据本身也包含在用等号分隔的引号中。该数据可以是网页上有效的任何字符串。例如:data-main-ingredient="chocolate".

然后可以将这些数据属性应用于任何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访问它，并根据这些数据操作页面。

小开

在这里你还可以找到更多data-toggle可以赋值的例子。只需访问页面，然后CTRL+F搜索data-toggle。

小开

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

数据- *

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

Reference .

小开

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

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

一针见血

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

如何使用:只有2步

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

用途:如果使用Bootstrap， data-toggle属性允许我们创建一个控件来折叠/展开div(块)。

小开

在引导中使用数据切换的目的是让您可以使用jQuery找到某种类型的所有标记。例如，你把data-toggle="popover"放在所有弹出式标签中，然后你可以使用JQuery选择器找到所有这些标签，并运行popover()函数来初始化它们。你也可以把class="myPopover"放在标签上，并使用.myPopover选择器来做同样的事情。文档是令人困惑的，因为它使该属性看起来像是发生了一些特殊的事情。

这

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

工作得很好。


提交答案