data-toggle
Twitter Bootstrap中的属性有什么作用?我在Bootstrap API中找不到答案。
在链接之前,我也看到过类似的问题。但这并没有太大帮助。
它是一个Bootstrap数据属性,可自动将元素连接到其所属的小部件类型。Data- *是html5规范的一部分,而data-toggle特定于Bootstrap。
一些例子:
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"
浏览Bootstrap 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>
任何以开头的data-
属性都是用于某些特定目的的自定义属性的前缀(该目的取决于应用程序)。它被作为一种语义上的补救措施,用于人们rel
出于最初意图之外的目的而大量使用和其他属性(rel
通常用于保存数据,如高级工具提示)。
就Bootstrap而言,我不熟悉其内部工作原理,但从名称来看,我猜想这是一个钩子,可以切换可见性或它所附加元素的模式(例如可折叠Octopress.org上的侧边栏)。
html5doctor在data- attribute上有一篇不错的文章。
第2周期是广泛使用data-attribute的另一个示例。
例如,假设您正在创建一个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类与数据类重复,最终在您的实时页面上出现奇怪的样式。
- 添加多个数据元素更加困难。如果您有多个数据元素,则需要通过类以某种方式通过类的名称或在类列表中的位置来访问它们。但是很容易搞砸。
我建议的所有其他方法都存在这些问题以及其他问题。但是由于这是快速,轻松地包含数据的唯一方法,所以我们就是这样做的。救援的HTML5数据属性
HTML5向任何元素(自定义数据元素(data- *))添加了一种新型的属性。您可以将这些自定义(用*表示)属性添加到HTML元素中,以定义所需的任何类型的数据。它们包括两个部分:
属性名称这是属性的名称。它必须至少是一个小写字符,并且具有前缀data-。例如:数据主成分,数据烹饪时间,数据餐。这是您的数据的名称。
与其他任何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进行访问,并根据该数据来操作页面。
<!--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>
给出了这么多答案,但是并没有达到目的。让我们解决这个问题。
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
至此
data-
HTML5解析器不会解析任何以开头的属性。- Bootstrap使用该
data-toggle
属性创建折叠功能。
使用方法:只需2个步骤
- 添加
class="collapse"
到#A
要折叠的元素。 - 添加
data-target="#A"
和data-toggle="collapse"
。
目的:如果使用Bootstrap,该data-toggle
属性使我们可以创建一个控件来折叠/展开div
(块)。
该数据属性的存在告诉Bootstrap在用户交互时在另一个元素的可视状态或逻辑状态之间切换。
它用于显示模式,选项卡内容,工具提示和弹出菜单,以及设置切换按钮的按下状态。没有清晰的文档,它有多种用法。
引导程序中的数据切换的目的是使您可以使用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>
效果很好。
文章标签:html , javascript , jquery , twitter-bootstrap
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!