Відповіді:
Це атрибут даних 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 - ще один приклад широкого використання атрибута даних .
Наприклад, скажіть, що ви створювали веб-додаток для переліку та відображення рецептів. Можливо, ви хочете, щоб ваші клієнти могли сортувати список, відображати функції рецептів тощо, перш ніж вони вибирають рецепт для відкриття. Для цього вам потрібно пов’язати такі речі, як час приготування їжі, основний інгредієнт, положення страви тощо, всередині елементів списку рецептів.
<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 до елементів списку, ви можете розміщувати всі рецепти в окремих папках залежно від часу, страви та інгредієнта (тобто). Більшість розробників прийняли рішення використовувати атрибути класу для зберігання інформації про поточний елемент. Це має ряд переваг:
Але є кілька основних недоліків цього методу:
Усі інші методи, які я запропонував, мали ці проблеми, як і інші. Але оскільки це був єдиний спосіб швидко та легко включити дані, це ми зробили. Атрибути даних Rescue для HTML5
HTML5 додав новий тип атрибута до будь-якого елемента - спеціальний елемент даних (data- *). Це спеціальні (позначені *) атрибути, які ви можете додати до своїх елементів HTML, щоб визначити будь-який тип даних, який потрібно. Вони складаються з двох частин:
Назва атрибута Це ім'я атрибута. Він повинен мати щонайменше один малий символ і мати дані префікса-. Наприклад: інгредієнт data-main, data-time-time-time, data-food. Це назва ваших даних.
Attribute 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>працює просто чудово.
Завантажувальний інструмент використовує стандарти HTML5 для того, щоб легко отримати доступ до атрибутів елементів DOM у межах JavaScript.
Формує клас атрибутів, який називається спеціальними атрибутами даних, які дозволяють обмінюватися власною інформацією між HTML та його представленням DOM, які можуть використовуватися скриптами. Усі такі спеціальні дані доступні через інтерфейс HTMLElement елемента, для якого встановлено атрибут. Властивість HTMLElement.dataset надає їм доступ.