Атрибуты переключения данных в Twitter Bootstrap

Что значит 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 к элементам списка, вы можете поместить все рецепты в отдельные папки в зависимости от времени, еды и ингредиента (то есть). Решение, принятое большинством разработчиков, заключалось в использовании атрибутов класса для хранения информации о текущем элементе. Это имеет несколько преимуществ:

• Вы можете хранить несколько классов на элементе
• Имена классов могут быть удобочитаемыми
• Легко получить доступ к классам с помощью JavaScript (className)
• Класс связан с элементом, на котором он находится

Но у этого метода есть несколько существенных недостатков:

• Вы должны помнить, что делают классы. Если вы забудете или новый разработчик вступит во владение проектом, классы могут быть удалены или изменены, не осознавая, что это влияет на работу приложения.
• Классы также используются для стилизации с помощью CSS, и вы можете по ошибке дублировать CSS-классы с классами данных, заканчивая странными стилями на ваших живых страницах.
• Сложнее добавить несколько элементов данных. Если у вас есть несколько элементов данных, вам нужно каким-то образом получить к ним доступ с помощью JavaScript, либо по имени класса, либо по позиции в списке классов. Но это легко испортить.

Все другие методы, которые я предложил, имели эти проблемы так же, как и другие. Но так как это был единственный способ быстро и легко включить данные, мы так и сделали. Атрибуты данных 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 и управлять страницей на основе этих данных.

Из Документов 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>

Было дано так много ответов, но они не доходят до сути. Давайте это исправим.

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

Цель: 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. Он привязывает кнопку к событию.

Здесь вы также можете найти больше примеров значений, которые data-toggleможно присвоить. Просто посетите страницу, а затем CTRL+Fискать data-toggle.

Bootstrap использует стандарты HTML5 для легкого доступа к атрибутам элементов DOM в javascript.

данные-*

Формирует класс атрибутов, называемых пользовательскими атрибутами данных, которые позволяют обмениваться частной информацией между HTML и его представлением DOM, которое может использоваться сценариями. Все такие пользовательские данные доступны через интерфейс HTMLElement элемента, для которого установлен атрибут. Свойство HTMLElement.dataset предоставляет доступ к ним.

Ссылка