Данные-переключение атрибутов в Twitter начальной загрузки
что значит data-toggle
атрибуты делают в Twitter Bootstrap? Я не мог найти ответ в Bootstrap API.
Я уже видел подобный вопрос раньше, ссылка. Но это мне не очень помогло.
10 ответов:
это атрибут данных 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>
любой атрибут, который начинается с
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 и управлять страницей на основе этих данных.
<!--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 переключаться между визуальными или логическими состояниями другого элемента при взаимодействии с пользователем.
Он используется для отображения модалов, содержимого вкладок, подсказок и всплывающих меню, а также для установки нажатого состояния для кнопки переключения. Он используется несколькими способами без четкой документации.
цель 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