Что значит data-toggle атрибуты в Twitter Bootstrap? Я не смог найти ответ в Bootstrap API.
Я видел подобный вопрос и раньше, ссылка . Но это мне не сильно помогло.
Что значит data-toggle атрибуты в Twitter Bootstrap? Я не смог найти ответ в Bootstrap API.
Я видел подобный вопрос и раньше, ссылка . Но это мне не сильно помогло.
Ответы:
Это атрибут данных Bootstrap, который автоматически подключает элемент к типу виджета. Data- * является частью спецификации html5, а переключение данных относится к 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 .
Цикл 2 является еще одним примером широкого использования атрибута data .
Например, допустим, вы создавали веб-приложение для отображения и отображения рецептов. Возможно, вы захотите, чтобы ваши клиенты могли сортировать список, отображать функции рецептов и т. Д., Прежде чем они выберут рецепт для открытия. Чтобы сделать это, вам нужно связать такие вещи, как время приготовления, основной ингредиент, позиция еды и т. Д. Прямо внутри элементов списка для рецептов.
<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 к элементам списка, вы можете поместить все рецепты в отдельные папки в зависимости от времени, еды и ингредиента (то есть). Решение, принятое большинством разработчиков, заключалось в использовании атрибутов класса для хранения информации о текущем элементе. Это имеет несколько преимуществ:
Но у этого метода есть несколько существенных недостатков:
Все другие методы, которые я предложил, имели эти проблемы так же, как и другие. Но так как это был единственный способ быстро и легко включить данные, мы так и сделали. Атрибуты данных HTML5 для спасения
HTML5 добавил новый тип атрибута к любому элементу - пользовательский элемент данных (data- *). Это пользовательские (обозначенные *) атрибуты, которые вы можете добавить к своим элементам HTML, чтобы определить любой тип данных, который вы хотите. Они состоят из двух частей:
Имя атрибута Это имя атрибута. Это должен быть хотя бы один строчный символ и иметь префикс data-. Например: данные-основной ингредиент, время приготовления данных, питание данных. Это имя ваших данных.
Атрибут Vaule Как и любой другой атрибут HTML, вы сами включаете данные в кавычки, разделенные знаком равенства. Эти данные могут быть любой строкой, которая действительна на веб-странице. Например: data-main-ингридиент = "шоколад".
Затем вы можете применить эти атрибуты данных к любому элементу 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.data-toggleатрибут для создания функциональности свертывания.Как использовать : только 2 шага
class="collapse"к элементу, который #Aвы хотите свернуть.data-target="#A"и data-toggle="collapse".Цель: data-toggleатрибут позволяет нам создать элемент управления, чтобы свернуть / развернуть div(блок), если мы используем Bootstrap.
Наличие этого атрибута данных говорит 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>работает просто отлично.
Bootstrap использует стандарты HTML5 для легкого доступа к атрибутам элементов DOM в javascript.
Формирует класс атрибутов, называемых пользовательскими атрибутами данных, которые позволяют обмениваться частной информацией между HTML и его представлением DOM, которое может использоваться сценариями. Все такие пользовательские данные доступны через интерфейс HTMLElement элемента, для которого установлен атрибут. Свойство HTMLElement.dataset предоставляет доступ к ним.