Les attributs de basculement de données dans Twitter Bootstrap

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

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

Il s'agit d'un attribut de données Bootstrap qui connecte automatiquement l'élément au type de widget qu'il est. Data- * fait partie de la spécification html5, et data-toggle est spécifique à Bootstrap.

Quelques exemples:

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

Parcourez les documents JavaScript Bootstrap 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>

Tout attribut commençant par data-est le préfixe des attributs personnalisés utilisés dans un but spécifique (ce but dépend de l'application). Il a été ajouté en tant que remède sémantique à l'usage intensif relet aux autres attributs des utilisateurs à des fins autres que leurs objectifs initiaux ( relétait souvent utilisé pour conserver des données pour des choses comme les info-bulles avancées).

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

html5doctor a un bon article sur l'attribut data .

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

Par exemple, supposons que vous créiez une application Web pour répertorier et afficher des recettes. Vous souhaiterez 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. dans les éléments de la liste 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>

Pour obtenir ces informations sur la page, vous pouvez effectuer différentes opérations. 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 séparés en fonction de l'heure, du repas et de l'ingrédient (c.-à-d.). La solution adoptée par la plupart des développeurs a consisté à utiliser des attributs de classe pour stocker des informations sur l'élément actuel. 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 certains inconvénients majeurs:

• Vous devez vous rappeler ce que font les classes. Si vous oubliez ou qu'un nouveau développeur reprend le projet, les classes peuvent être supprimées ou modifiées sans se rendre compte que cela affecte le fonctionnement de l'application.
• Les classes sont également utilisées pour le style avec CSS, et vous pouvez dupliquer des classes CSS avec des classes de données par erreur, vous retrouvant avec des styles étranges sur vos pages en direct.
• 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 des classes. Mais c'est facile de gâcher.

Toutes les autres méthodes que j'ai suggérées présentaient 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 à n'importe quel é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 tout type de données que vous souhaitez. Ils se composent de deux parties:

Nom d'attribut Il s'agit du nom de l'attribut. Il doit s'agir d'au moins un caractère minuscule et avoir le préfixe data-. Par exemple: données-ingrédient principal, données-temps de cuisson, données-repas. Il s'agit du 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-ingredient = "chocolate".

Vous pouvez ensuite appliquer ces attributs de données à tout élément HTML souhaité. 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.

Depuis les documents Bootstrap:

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

Tant de réponses ont été données, mais elles ne parviennent pas à l'essentiel. Corrigeons cela.

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

Au point

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

Comment utiliser : seulement 2 étapes

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

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

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 avec 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 un état enfoncé pour un bouton à bascule. Il est utilisé de plusieurs façons sans documentation claire.

Le but du basculement de données dans le bootstrap est que vous puissiez utiliser jQuery pour trouver 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 trouver toutes ces balises et exécuter la fonction popover () pour les initialiser. Vous pourriez tout 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 l'impression que quelque chose de spécial se passe avec cet attribut.

Ce

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

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

Ici, vous pouvez également trouver plus d'exemples de valeurs data-togglepouvant être affectées. Il suffit de visiter la page, puis CTRL+Fde rechercher data-toggle.

Bootstrap s'appuie sur les normes HTML5 afin d'accéder facilement aux attributs des éléments DOM au sein de javascript.

Les données-*

Forme une classe d'attributs, appelés attributs de données personnalisés, qui permettent d'échanger des informations propriétaires entre le HTML et sa représentation DOM qui peuvent être utilisées par des 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