Что такое data-target и data-slide-to атрибут?

Я использую bootstrap, (хорошо, я новичок в этом), я нашел эти два атрибута, может кто-нибудь объяснить мне это?

21
css frontend html twitter-bootstrap

3 ответов

просто чтобы продолжить точку @Larsenal, пользовательские атрибуты данных могут быть очень удобны для разработчиков. Как говорится в спецификации:

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

пример использования включает в себя:

хранение начальной высоты / ширины, которая позже может быть изменена с помощью JS. Есть простые способы получить и установить эти атрибуты через JavaScript-используя getAttribute и setAttribute. 

 <div id='strawberry-plant' data-fruit='12'></div>
 <script>
    // 'Getting' data-attributes using getAttribute
    var plant = document.getElementById('strawberry-plant');
    var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
 </script>

вспомни хотя бы, это не good practice. Итак, используйте dataset properties.

подробнее о данных-атрибутов: http://html5doctor.com/html5-custom-data-attributes/

вы упадете в любите их как разработчика JavaScript (а может и нет).

17

атрибуты, которые вы видите, являются настраиваемыми атрибутами данных. Они иногда обозначаются data-*.

все с префиксом "data -" используется для хранения пользовательских данных, которые не будут отображаться в браузере.

таким образом, вы могли бы иметь это:

<div data-foo="ABC" data-bar="123">Hello World</div>

обычно Вы читаете эти данные из своего JavaScript и что-то делаете с ним.

12

в этом случае они являются переменными, используемыми для настройки на компонент карусель:

используйте атрибуты данных, чтобы легко контролировать положение карусели. data-slide принимает ключевые слова prev или next, которое изменяет скольжение положение относительно его текущего положения. В качестве альтернативы, использовать data-slide-to передать индекс сырого слайд в карусели data-slide-to="2", который переносит положение скольжения к определенному начало индекса с 0.

подробнее о HTML5 data- атрибуты.

5