Les attributs de bascule de données dans Bootstrap Twitter
Quoi data-toggle
sont les attributs de Twitter Bootstrap? Je n'ai pas trouvé de réponse dans L'API de Bootstrap.
j'ai déjà vu une question semblable auparavant, link . Mais ça ne m'aide pas beaucoup.
10 réponses
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"
passez par le JavaScript docs et recherchez data-toggle et vous verrez qu'il est utilisé dans les exemples de code.
un exemple pratique:
<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é à titre de remède sémantique à l'utilisation massive de rel
et d'autres attributs à des fins autres que leurs fins prévues à l'origine ( rel
a été souvent utilisé pour conserver des données pour des choses comme les infobulles 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 il est attaché à (comme la barre latérale pliable sur Octopress.org ).
html5doctor a un bon article sur l'attribut de données .
le Cycle 2 est un autre exemple d'utilisation extensive de l'attribut de données .
par exemple, dites que vous créez une application web pour répertorier et afficher des recettes. Vous voudrez peut-être que vos clients puissent trier la liste, Afficher les caractéristiques des recettes, et ainsi de suite avant de choisir la recette à ouvrir. Pour ce faire, vous devez associer des choses comme le temps de cuisson, l'ingrédient principal, la position du repas, et ainsi de suite à l'intérieur de la liste des éléments pour les 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 cette information dans la page, vous pourrait 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 basés sur le temps, le repas et l'ingrédient (i.e. ). La solution que la plupart des développeurs ont pris était d'utiliser les attributs de classe pour stocker des informations sur l'élément courant. Cela présente plusieurs avantages:
- vous pouvez stocker plusieurs classes sur un élément
- les noms de classe peuvent être lisible par l'homme
- il est facile d'accéder aux classes avec JavaScript (nom de classe)
- La classe est associée à l'élément sur
mais il y a quelques inconvénients majeurs à cette méthode:
- vous devez vous rappeler ce que font les classes. Si vous oubliez ou un nouveau développeur prend en charge le projet, les classes peuvent être supprimés ou modifiés sans se rendre compte que cela affecte la façon dont l'application fonctionne. 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, pour finir avec des styles étranges sur vos pages live.
- il est plus difficile d'ajouter plusieurs éléments de données. Si vous avez plusieurs éléments de données, vous devez accéder à votre JavaScript, soit par le nom de la classe ou de la position dans la liste de la classe. Mais il est facile de désordre.
toutes les autres méthodes que je suggérais avaient ces problèmes ainsi que d'autres. Mais comme c'était la seule façon d'inclure rapidement et facilement des données, c'est ce que nous avons fait. HTML5 Attributs de Données à la Rescousse
HTML5 a ajouté un nouveau type d'attribut à tout élément-l'élément de données personnalisé (data-*). Ce sont des attributs personnalisés (marqués par les*) que vous pouvez ajouter à vos éléments HTML pour définir n'importe quel type de données que vous voulez. Ils se composent de deux parties:
Le Nom De L'Attribut C'est le nom de l'attribut. Il doit avoir 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. C'est le nom de vos données.
Attribut Vaule Comme tout autre attribut HTML, vous incluez les données elles-mêmes dans des guillemets séparés par un signe égal. Ces données peuvent être n'importe quelle chaîne de caractères valide sur une page web. Par exemple: données principal ingrédient="chocolat".
vous pouvez puis appliquez ces attributs de données à n'importe quel élément HTML que vous voulez. 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 aurez cette information dans votre HTML, vous pourrez y accéder avec JavaScript et manipuler la page à partir de ces données.
From the 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>
la présence de cet attribut de données indique à Bootstrap de basculer entre les états visuels ou logiques d'un autre élément sur l'interaction utilisateur.
il est utilisé pour afficher les modaux, le contenu des onglets, les tooltips et les menus popover ainsi que pour définir un état pressé pour un bouton à bascule. Il est utilisé de multiples façons sans une documentation claire.
il s'agit d'un attribut de données HTML5 défini par Bootstrap. Il lie un bouton à un événement.
le but de la bascule de données dans bootstrap est donc vous pouvez utiliser jQuery pour trouver toutes les étiquettes d'un certain type. Par exemple, vous mettez data-toggle="liste" dans tous les liste des balises que vous pouvez utiliser un sélecteur JQuery pour trouver toutes ces balises et exécuter la liste() pour l'initialiser. Vous pouvez tout aussi bien mettre class="myPopover" sur l'étiquette et utiliser le .myPopover sélecteur de faire la même chose. La documentation est déroutante, parce qu'elle donne l'impression qu'il se passe quelque chose de spécial. 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.
Bootstrap exploite les standards HTML5 afin d'accéder facilement aux attributs des éléments DOM dans javascript.
data - *
forme une classe d'attributs, appelés attributs de données personnalisées, qui permettent l'échange d'informations exclusives entre le HTML et sa représentation DOM qui peut ê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 placé. Le HTMLElement.la propriété dataset leur donne accès.
beaucoup de réponses, mais je ne pouvais pas obtenir le point de répondre. Permet de voir ce.
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
au point
un. Un attribut à partir de données n'est pas d'analyser en HTML5 analyseur.
B. Bootstrap utilise l'attribut data-toggle pour créer fonction de collapsus
comment utiliser : seulement 2 étapes
1) Ajoutez class= "collapsus" à l'élément #a que vous voulez collapsus.
2) Ajouter data-target= "#A "et data-toggle= "collapse"
Purport: l'attribut data-toggle nous aide à créer le contrôle pour s'effondrer/étendre un div (bloc) si nous utilisons CSS Bootstrap