it-swarm.com.ru

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

Что делают атрибуты data-toggle в Twitter Bootstrap? Я не смог найти ответ в Bootstrap API.

Я видел подобный вопрос и раньше: ссылка . Но это мне не сильно помогло.

270
user1765876

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

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

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

Пройдите через JavaScript docs и найдите переключатель данных, и вы увидите, что он используется в примерах кода.

Один рабочий пример:

<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>
201
epascarello

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

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

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

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

72
Shauna

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

<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 и манипулировать страницей на основе этих данных.

30
shikarii

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

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

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

5
Gregor

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

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.

5
Akshay Vijay Jain

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

4
Amrendra

Цель переключения данных в 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>

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

4
shawnlg

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

данные-*

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

ссылка

2
Rel

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

2
pebox11