Данные-переключение атрибутов в Twitter начальной загрузки

любой атрибут, который начинается с data- - это префикс для пользовательских атрибутов, используемых для определенной цели (эта цель зависит от приложения). Он был добавлен как семантическое средство для интенсивного использования людьми rel и другие атрибуты для целей, отличных от их первоначального предназначения (rel часто используется для хранения данных для таких вещей, как расширенные подсказки).

В случае Bootstrap я не знаком с его внутренней работой, но, судя по названию, я бы угадайте, что это крюк, позволяющий переключать видимость или, возможно, режим элемента, к которому он прикреплен (например, складная боковая панель on Octopress.org).

html5doctor имеет хорошую статью о Data-attribute.

цикл 2 является еще одним примером широкого использования данных - атрибута.

например, предположим, что вы создавали веб-приложение для отображения и отображения рецептов. Возможно, вы захотите, чтобы ваши клиенты могли сортировать список, отображать функции рецептов и т. д., Прежде чем они выберут рецепт для открытия. Для этого вам нужно связать такие вещи, как Время приготовления, основной ингредиент, положение еды и т. д. прямо внутри элементов списка для рецептов.

<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-. Например: данные-основной ингредиент, данные-Время приготовления, данные-еда. Это имя ваших данных.

Значение Атрибута Как и любой другой атрибут HTML, вы включаете сами данные в кавычки, разделенные знаком равенства. Эти данные могут быть любой строкой, допустимой на веб-странице. Например: data-main-ingredient= "шоколад".

затем вы можете применить эти атрибуты данных к любому элементу 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 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>

наличие этого атрибута данных указывает Bootstrap переключаться между визуальными или логическими состояниями другого элемента при взаимодействии с пользователем.

Он используется для отображения модалов, содержимого вкладок, подсказок и всплывающих меню, а также для установки нажатого состояния для кнопки переключения. Он используется несколькими способами без четкой документации.

Это Bootstrap определенный атрибут данных HTML5. Он привязывает кнопку к событию.

цель data-toggle в 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>

работает просто отлично.

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

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

сведения-*

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

ссылка

Так много ответов дано, но я не мог получить ответ на вопрос. Давайте посмотрим на это. http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

до точки

a. любой атрибут, начинающийся с данных, не анализируется синтаксическим анализатором HTML5.

b.Bootstrap использует атрибут переключения данных для создания функции свернуть

как использовать: Только 2 Шага

1) добавить класс="свернуть" в элемент #A вы хотите свернуть.

2) Добавить data-target= "#A"и data-toggle="collapse"

Purport: data-toggle атрибут помогает нам создать элемент управления, чтобы свернуть / развернуть div (блок), если мы используем css Bootstrap