it-swarm.com.de

Die Datenumschalt-Attribute in Twitter Bootstrap

Was machen data-toggle Attribute in Twitter Bootstrap? Ich konnte in der Bootstrap API keine Antwort finden.

Ich habe auch schon eine ähnliche Frage gesehen, link . Aber es hat mir nicht viel geholfen.

273
user1765876

Hierbei handelt es sich um ein HTML5-Datenattribut, das das Element automatisch an den Widget-Typ anschließt, der es ist.

Einige Beispiele:

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

Durchsuchen Sie die JavaScript-Dokumente und suchen Sie nach data-toggle. Sie werden sehen, dass es in den Codebeispielen verwendet wird.

Ein Arbeitsbeispiel:

<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

Jedes Attribut, das mit data- beginnt, ist das Präfix für benutzerdefinierte Attribute, die für einen bestimmten Zweck verwendet werden (dieser Zweck hängt von der Anwendung ab). Es wurde als semantisches Mittel hinzugefügt, um die häufige Verwendung von rel und anderen Attributen für andere als die ursprünglich beabsichtigten Zwecke zu beheben (rel wurde häufig verwendet, um Daten für Dinge wie erweiterte QuickInfos zu speichern).

Im Fall von Bootstrap bin ich mit dem Innenleben nicht vertraut, aber nach dem Namen zu urteilen, ist es ein Haken, um die Sichtbarkeit oder vielleicht den Modus des Elements, an das es angehängt ist (wie das zusammenklappbare Element), umzuschalten Seitenleiste auf Octopress.org ).

html5doctor hat einen guten Artikel zum Datenattribut .

Zyklus 2 ist ein weiteres Beispiel für die umfassende Verwendung des Datenattributs .

73
Shauna

Angenommen, Sie haben eine Webanwendung erstellt, um Rezepte aufzulisten und anzuzeigen. Möglicherweise möchten Sie, dass Ihre Kunden die Liste sortieren, Funktionen der Rezepte anzeigen usw. können, bevor sie das zu öffnende Rezept auswählen. Dazu müssen Sie Dinge wie Garzeit, Hauptzutat, Essensposition usw. direkt in den Listenelementen für die Rezepte zuordnen.

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

Um diese Informationen auf die Seite zu bekommen, können Sie viele verschiedene Dinge tun. Sie können jedem LI-Element Kommentare hinzufügen, rel-Attribute zu den Listenelementen hinzufügen und alle Rezepte auf der Grundlage von Zeit, Mahlzeit und Zutat (d. H.) In separaten Ordnern ablegen. Die Lösung, die die meisten Entwickler verwendeten, bestand darin, Klassenattribute zum Speichern von Informationen zum aktuellen Element zu verwenden. Dies hat mehrere Vorteile:

  • Sie können mehrere Klassen in einem Element speichern
  • Die Klassennamen können von Menschen lesbar sein
  • Es ist einfach, mit JavaScript (className) auf Klassen zuzugreifen.
  • Die Klasse ist dem Element zugeordnet, auf dem sie sich befindet

Diese Methode weist jedoch einige wesentliche Nachteile auf:

  • Sie müssen sich daran erinnern, was die Klassen tun. Wenn Sie das Projekt vergessen oder ein neuer Entwickler das Projekt übernimmt, werden die Klassen möglicherweise entfernt oder geändert, ohne zu bemerken, dass sich dies auf die Ausführung der Anwendung auswirkt.
  • Klassen werden auch zum Stylen mit CSS verwendet, und Sie könnten versehentlich CSS-Klassen mit Datenklassen duplizieren, was zu seltsamen Stilen auf Ihren Live-Seiten führt.
  • Es ist schwieriger, mehrere Datenelemente hinzuzufügen. Wenn Sie mehrere Datenelemente haben, müssen Sie mit Ihrem JavaScript auf diese zugreifen, entweder über den Namen der Klasse oder die Position in der Klassenliste. Aber es ist leicht, Fehler zu machen.

Alle anderen von mir vorgeschlagenen Methoden hatten diese und andere Probleme. Da es jedoch die einzige Möglichkeit war, Daten schnell und einfach einzubinden, haben wir dies getan. HTML5-Datenattribute für die Rettung

HTML5 fügte jedem Element einen neuen Attributtyp hinzu - das benutzerdefinierte Datenelement (data- *). Hierbei handelt es sich um benutzerdefinierte (mit * gekennzeichnete) Attribute, die Sie Ihren HTML-Elementen hinzufügen können, um einen beliebigen Datentyp zu definieren. Sie bestehen aus zwei Teilen:

Attributname Dies ist der Name des Attributs. Es muss mindestens ein Kleinbuchstabe sein und das Präfix data- haben. Zum Beispiel: Daten-Hauptzutat, Daten-Garzeit, Daten-Mahlzeit. Dies ist der Name Ihrer Daten.

Attribut Vaule Wie jedes andere HTML-Attribut schließen Sie die Daten selbst in Anführungszeichen ein, die durch ein Gleichheitszeichen getrennt sind. Diese Daten können beliebige Zeichenfolgen sein, die auf einer Webseite gültig sind. Zum Beispiel: Daten-Hauptzutat = "Schokolade".

Sie können diese Datenattribute dann auf jedes gewünschte HTML-Element anwenden. Beispielsweise könnten Sie die Informationen in der obigen Beispielliste definieren:

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

Sobald Sie diese Informationen in Ihrem HTML-Code haben, können Sie mit JavaScript darauf zugreifen und die Seite basierend auf diesen Daten bearbeiten.

30
shikarii

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

Es wurden so viele Antworten gegeben, aber sie kommen nicht auf den Punkt. Lassen Sie uns das beheben.

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

Auf den Punkt gebracht

  1. Alle Attribute, die mit data- beginnen, werden vom HTML5-Parser nicht analysiert.
  2. Bootstrap verwendet das data-toggle -Attribut, um die Minimierungsfunktionalität zu erstellen.

Wie benutzt man: Nur 2 Schritte

  1. Fügen Sie class="collapse" zu dem Element #A hinzu, das Sie reduzieren möchten.
  2. Fügen Sie data-target="#A" und data-toggle="collapse" hinzu.

Zweck: Mit dem Attribut data-toggle können wir ein Steuerelement zum Reduzieren/Erweitern eines div (Blocks) erstellen, wenn wir Bootstrap verwenden.

7

Das Vorhandensein dieses Datenattributs weist Bootstrap an, bei Benutzerinteraktion zwischen visuellen oder logischen Zuständen eines anderen Elements zu wechseln.

Es dient zum Anzeigen von Modalitäten, Registerkarteninhalten, QuickInfos und Popover-Menüs sowie zum Festlegen eines gedrückten Status für eine Umschalttaste. Es wird auf vielfältige Weise ohne eindeutige Dokumentation verwendet.

5
Gregor

Das Umschalten der Daten in bootstrap dient dazu, mit jQuery alle Tags eines bestimmten Typs zu finden. Sie setzen beispielsweise data-toggle = "popover" in alle Popover-Tags und können dann mit einem JQuery-Selektor alle diese Tags suchen und die Funktion popover () ausführen, um sie zu initialisieren. Sie können auch class = "myPopover" in das Tag einfügen und den Selektor .myPopover verwenden, um dasselbe zu tun. Die Dokumentation ist verwirrend, da es den Anschein hat, dass mit diesem Attribut etwas Besonderes passiert.

Diese

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

funktioniert gut.

5
shawnlg

Es ist ein Bootstrap definiertes HTML5-Datenattribut. Es bindet eine Schaltfläche an ein Ereignis.

4
Amrendra

Bootstrap nutzt HTML5-Standards, um innerhalb von Javascript auf DOM-Elementattribute zuzugreifen.

daten-*

Bildet eine Klasse von Attributen, die als benutzerdefinierte Datenattribute bezeichnet werden und den Austausch von proprietären Informationen zwischen dem HTML-Code und seiner DOM-Darstellung ermöglichen, die von Skripten verwendet werden können. Alle diese benutzerdefinierten Daten sind über die HTMLElement-Schnittstelle des Elements verfügbar, für das das Attribut festgelegt ist. Die Eigenschaft HTMLElement.dataset ermöglicht den Zugriff auf diese.

Referenz

2
Rel

hier Hier finden Sie auch weitere Beispiele für Werte, die data-toggle zugewiesen haben kann. Besuchen Sie einfach die Seite und dann CTRL+F, um nach data-toggle zu suchen.

2
pebox11