Twitter Bootstrap中的数据切换属性

Question

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

我之前也看过类似的问题,链接.但它对我帮助不大.

Answer 1

它是一个HTML5数据属性,可以自动将元素与其窗口小部件类型挂钩.

一些例子:

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

浏览JavaScript文档并搜索数据切换,您将在代码示例中看到它.

一个工作的例子:

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

Answer 2

以任何开头的data-属性是用于某些特定目的的自定义属性的前缀(该目的取决于应用程序).它被添加为语义补救措施,以便人们大量使用rel和其他属性用于除了其原始预期目的之外的目的(rel通常用于保存高级工具提示之类的数据).

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

html5doctor有关于data-属性的好文章.

周期2是广泛使用数据属性的另一个例子.

Answer 3

例如,假设您正在创建一个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数据属性到救援

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

属性名称这是属性的名称.它必须至少为一个小写字符并且具有前缀data-.例如:数据主要成分,数据烹饪时间,数据餐.这是您的数据名称.

属性Vaule与任何其他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访问它并根据该数据操作页面.

Answer 4

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

Answer 5

给出了这么多答案，但是并没有达到目的。让我们解决这个问题。

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（块）。

Answer 6

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

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

Answer 7

引导程序中数据切换的目的是使您可以使用jQuery查找特定类型的所有标签。例如，将data-toggle =“ popover”放入所有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>

效果很好。