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

Ответ 1

Это атрибут данных HTML5, который автоматически привязывает элемент к типу виджета.

Некоторые примеры:

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

Пройдите документы 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>

Ответ 2

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

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

html5doctor имеет хорошую статью об атрибуте данных.

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

Ответ 3

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

<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)
• Класс связан с элементом its on

Но есть некоторые основные недостатки этого метода:

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

Все другие методы, которые я предлагал, имели эти проблемы, а также другие. Но поскольку это был единственный способ быстро и легко включить данные, это то, что мы сделали. Атрибуты данных HTML5 для спасения

HTML5 добавил новый тип атрибута к любому элементу - пользовательскому элементу данных (data- *). Это пользовательские (обозначенные атрибутами *), которые вы можете добавить в свои HTML-элементы для определения любого типа данных, которые вы хотите. Они состоят из двух частей:

Имя атрибута Это имя атрибута. Он должен быть как минимум одним строчным символом и иметь данные префикса. Например: основной ингредиент данных, время приготовления данных, данные-еда. Это имя ваших данных.

Атрибут Vaule Как и любой другой атрибут HTML, вы включаете сами данные в кавычки, разделенные знаком равенства. Эти данные могут быть любой строкой, которая действительна на веб-странице. Например: data-main-component = "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 и манипулировать страницей на основе этих данных.

Ответ 4

Из 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>

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

данные - *

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

Ссылка

Ответ 10

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

К пункту

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

b.Bootstrap использует атрибут data-toggle для создания функции свернуть

Как использовать: всего 2 шага

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

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

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