web-dev-qa-db-fra.com

Qu'est-ce que l'attribut data-target et data-slide-to?

J'utilise le bootstrap, (ok, je suis nouveau), j'ai trouvé ces deux attributs, quelqu'un peut-il me l'expliquer?

htmlcsstwitter-bootstrapfrontend
22
Xinrui Ma

Juste pour faire avancer le point de @Larsenal, les attributs de données personnalisés pourraient être très utiles pour les développeurs. Comme le dit la spécification:

Les attributs de données personnalisés sont destinés à stocker des données personnalisées privées sur la page ou l'application, pour lesquelles il n'y a plus d'attributs ou d'éléments appropriés. Ces attributs ne sont pas destinés à être utilisés par un logiciel indépendant du site qui utilise les attributs.

L'exemple d'utilisation comprend:

Stockage de la hauteur/largeur initiale, qui pourrait être modifiée ultérieurement avec JS. Il existe des moyens faciles d'obtenir et de définir ces attributs via JavaScript - en utilisant getAttribute et 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>

N'oubliez pas que , c'est pas good practice. Alors, utilisez dataset properties.

En savoir plus sur les attributs de données ici: http://html5doctor.com/html5-custom-data-attributes/

Vous tomberiez amoureux d'eux en tant que développeur JavaScript (ou peut-être pas).

18
Watchful Protector

Les attributs que vous voyez sont des attributs de données personnalisés. Ils sont parfois notés data-*.

Tout ce qui a le préfixe "data-" est utilisé pour stocker des données personnalisées qui ne seront pas affichées dans le navigateur.

Vous pourriez donc avoir ceci:

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

En règle générale, vous devez relire ces données à partir de votre JavaScript et en faire quelque chose.

12
Larsenal

Dans ce cas, ce sont des variables utilisées pour configurer le composant carrousel :

Utilisez des attributs de données pour contrôler facilement la position du carrousel. data-slide accepte les mots clés prev ou next, ce qui modifie la position de la diapositive par rapport à sa position actuelle. Vous pouvez également utiliser data-slide-to pour passer un index de diapositive brut au carrousel data-slide-to="2", qui déplace la position de la diapositive vers un index particulier commençant par 0.

En savoir plus sur HTML5 data- attributs .

5
Blazemonger