首页 文章

Twitter Bootstrap中的数据切换属性

提问于
浏览 次
257

data-toggle 属性在Twitter Bootstrap中有什么作用？我在Bootstrap API中找不到答案 .

我之前也见过类似的问题，link . 但它对我帮助不大 .

javascript jquery html5 twitter-bootstrap

10 回答

  • 22

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

    一些例子：

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

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

    一个工作的例子：

    <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>
    回复于
  • 4

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

    在Bootstrap的情况下，我猜测's a hook to allow toggling of the visibility or perhaps a mode of the element it' s附加到（例如可折叠的侧栏on Octopress.org） .

    html5doctor has a good article on the data- attribute .

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

    回复于
  • 193

    例如，假设您正在创建一个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访问它并根据该数据操作页面 .

    回复于
  • 28

    来自Bootstrap Docs:

    <!--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>
    回复于
  • 4

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

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

    回复于
  • 2

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

    回复于
  • 2

    在引导程序中进行数据切换的目的是让您可以使用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>

    工作得很好 .

    回复于
  • 4

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

    回复于
  • 66

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

    data- *

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

    Reference

    回复于
  • 2

    给出了很多答案，但我无法得到答案 . 让我们看看这个 . http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

    To the point

    一个 . 任何以data开头的属性都不是由HTML5解析器解析的 .

    b.Bootstrap使用data-toggle属性来创建折叠功能

    How to use ：只有2个步骤

    1）将class = "collapse"添加到要折叠的元素#A .

    2）添加data-target = "#A"和data-toggle = "collapse"

    Purport：data-toggle属性帮助我们创建控件以在我们使用CSS Bootstrap时折叠/展开div（块）

    回复于

相关问题