web-dev-qa-db-fra.com

Les attributs de basculement de données dans Twitter Bootstrap

Que font les attributs data-toggle dans Twitter Bootstrap? Je n'ai pas pu trouver de réponse dans l'API Bootstrap.

J'ai déjà vu une question similaire auparavant, lien . Mais cela ne m'a pas beaucoup aidé.

javascriptjqueryhtml5twitter-bootstrap
273
user1765876

C'est un attribut de données HTML5 qui relie automatiquement l'élément au type de widget qu'il est.

Quelques exemples:

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

Parcourez le JavaScript et recherchez Data-toggle et vous le verrez utilisé dans les exemples de code.

Un exemple de travail:

<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

Tout attribut commençant par data- est le préfixe des attributs personnalisés utilisés à des fins spécifiques (cette fin dépend de l'application). Il a été ajouté en tant que remède sémantique à l'usage intensif de rel et d'autres attributs à des fins autres que celles initialement prévues (rel était souvent utilisé pour stocker des données telles que des info-bulles avancées).

Dans le cas de Bootstrap, je ne connais pas son fonctionnement interne, mais à en juger par son nom, je suppose que c’est un crochet qui permet de basculer la visibilité ou peut-être un mode de l’élément auquel il est attaché (comme le barre latérale sur Octopress.org ).

html5doctor a un bon article sur l'attribut data .

Le cycle 2 est un autre exemple d'utilisation intensive de l'attribut data .

73
Shauna

Par exemple, supposons que vous créiez une application Web pour répertorier et afficher les recettes. Vous voudrez peut-être que vos clients puissent trier la liste, afficher les fonctionnalités des recettes, etc. avant de choisir la recette à ouvrir. Pour ce faire, vous devez associer des éléments tels que le temps de cuisson, l'ingrédient principal, la position du repas, etc., directement dans la liste des éléments des recettes.

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

Afin d'obtenir cette information dans la page, vous pouvez faire beaucoup de choses différentes. Vous pouvez ajouter des commentaires à chaque élément LI, vous pouvez ajouter des attributs rel aux éléments de la liste, vous pouvez placer toutes les recettes dans des dossiers distincts en fonction de l'heure, du repas et de l'ingrédient (c'est-à-dire). La solution choisie par la plupart des développeurs consistait à utiliser des attributs de classe pour stocker des informations sur l'élément en cours. Cela présente plusieurs avantages:

  • Vous pouvez stocker plusieurs classes sur un élément
  • Les noms de classe peuvent être lisibles par l'homme
  • Il est facile d’accéder aux classes avec JavaScript (className)
  • La classe est associée à l’élément sur lequel elle se trouve.

Mais cette méthode présente des inconvénients majeurs:

  • Vous devez vous rappeler ce que font les classes. Si vous oubliez ou si un nouveau développeur prend en charge le projet, les classes peuvent être supprimées ou modifiées sans se rendre compte que cela affecte la façon dont l'application s'exécute.
  • Les classes sont également utilisées pour les styles avec CSS, et vous pouvez dupliquer des classes CSS avec des classes de données par erreur, ce qui aboutit à des styles étranges sur vos pages actives.
  • Il est plus difficile d’ajouter plusieurs éléments de données. Si vous avez plusieurs éléments de données, vous devez y accéder d'une manière ou d'une autre avec votre JavaScript, soit par le nom de la classe, soit par la position dans la liste de classes. Mais c’est facile de se tromper.

Toutes les autres méthodes que j'ai suggérées avaient ces problèmes ainsi que d'autres. Mais comme c’était le seul moyen d’inclure rapidement et facilement des données, c’est ce que nous avons fait. Attributs de données HTML5 à la rescousse

HTML5 a ajouté un nouveau type d'attribut à un élément: l'élément de données personnalisé (data- *). Ce sont des attributs personnalisés (indiqués par *) que vous pouvez ajouter à vos éléments HTML pour définir le type de données souhaité. Ils se composent de deux parties:

Nom de l'attribut Il s'agit du nom de l'attribut. Il doit comporter au moins une minuscule et avoir le préfixe data-. Par exemple: données-ingrédient principal, données-temps de cuisson, données-repas. Ceci est le nom de vos données.

Attribut Vaule Comme tout autre attribut HTML, vous incluez les données elles-mêmes entre guillemets séparés par un signe égal. Ces données peuvent être n'importe quelle chaîne valide sur une page Web. Par exemple: data-main-ingrédient = "chocolat".

Vous pouvez ensuite appliquer ces attributs de données à n’importe quel élément HTML de votre choix. Par exemple, vous pouvez définir les informations dans la liste d’exemples ci-dessus:

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

Une fois que vous avez ces informations dans votre code HTML, vous pourrez y accéder avec JavaScript et manipuler la page en fonction de ces données.

30
shikarii

Depuis le 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

Tant de réponses ont été données, mais elles ne vont pas droit au but. Réglons ça.

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

Jusqu'au point

  1. Tout attribut commençant par data- n'est pas analysé par l'analyseur HTML5.
  2. Bootstrap utilise l'attribut data-toggle pour créer une fonctionnalité de réduction.

Comment utiliser: Seulement 2 étapes

  1. Ajoutez class="collapse" à l'élément #A que vous souhaitez réduire.
  2. Ajoutez data-target="#A" et data-toggle="collapse".

Objectif: l'attribut data-toggle nous permet de créer un contrôle pour réduire/développer une div (bloc) si nous utilisons Bootstrap.

7
Akshay Vijay Jain

La présence de cet attribut de données indique à Bootstrap de basculer entre les états visuels ou logiques d'un autre élément lors de l'interaction de l'utilisateur.

Il est utilisé pour afficher les modaux, le contenu des onglets, les info-bulles et les menus contextuels, ainsi que pour définir l'état enfoncé pour un bouton bascule. Il est utilisé de multiples façons sans documentation claire.

5
Gregor

Le basculement de données dans bootstrap a pour but de vous permettre d'utiliser jQuery pour rechercher toutes les balises d'un certain type. Par exemple, vous mettez data-toggle = "popover" dans toutes les balises popover, puis vous pouvez utiliser un sélecteur JQuery pour rechercher toutes ces balises et exécuter la fonction popover () pour les initialiser. Vous pouvez aussi bien mettre class = "myPopover" sur la balise et utiliser le sélecteur .myPopover pour faire la même chose. La documentation est déroutante, car elle donne à penser que quelque chose de spécial se passe avec cet attribut.

Cette

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

fonctionne très bien.

5
shawnlg

Il s'agit d'un attribut de données HTML5 défini par Bootstrap. Il lie un bouton à un événement.

4
Amrendra

Bootstrap utilise les normes HTML5 pour accéder facilement aux attributs des éléments DOM dans javascript.

les données-*

Forme une classe d'attributs, appelés attributs de données personnalisés, permettant l'échange d'informations entre le code HTML et sa représentation DOM pouvant être utilisée par les scripts. Toutes ces données personnalisées sont disponibles via l'interface HTMLElement de l'élément sur lequel l'attribut est défini. La propriété HTMLElement.dataset leur donne accès.

référence

2
Rel

Ici vous pouvez également trouver plus d'exemples de valeurs que data-toggle peut avoir attribuées. Il suffit de visiter la page, puis CTRL+F pour rechercher data-toggle.

2
pebox11