Die Datenumschaltattribute in Twitter Bootstrap

Was machen data-toggleAttribute 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.

Es ist ein Bootstrap-Datenattribut, das das Element automatisch mit dem Typ des Widgets verbindet. Data- * ist Teil der HTML5-Spezifikation, und Data-Toggle ist spezifisch für Bootstrap.

Einige Beispiele:

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

Gehen Sie die Bootstrap-JavaScript-Dokumente durch und suchen Sie nach Datenumschaltung. Sie werden sehen, dass sie 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>

Jedes Attribut, das mit beginnt, data-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 gegen die häufige Verwendung relund andere Attribute von Personen für andere Zwecke als die ursprünglich vorgesehenen Zwecke hinzugefügt ( relwurde häufig verwendet, um Daten für Dinge wie erweiterte Tooltips zu speichern).

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

html5doctor hat einen guten Artikel über das Datenattribut .

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

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, Position der Mahlzeit usw. direkt in den Listenelementen für die Rezepte verknüpfen.

<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 bringen, können Sie viele verschiedene Dinge tun. Sie können jedem LI-Element Kommentare hinzufügen, Sie können den Listenelementen rel-Attribute hinzufügen, Sie können alle Rezepte in separaten Ordnern ablegen, basierend auf Zeit, Mahlzeit und Zutat (dh). Die Lösung, die die meisten Entwickler gewählt haben, bestand darin, Klassenattribute zum Speichern von Informationen über das aktuelle Element zu verwenden. Dies hat mehrere Vorteile:

• Sie können mehrere Klassen in einem Element speichern
• Die Klassennamen können von Menschen gelesen werden
• Der Zugriff auf Klassen ist mit JavaScript (className) einfach.
• Die Klasse ist dem Element zugeordnet, auf dem sie sich befindet

Diese Methode weist jedoch einige Hauptnachteile auf:

• Sie müssen sich daran erinnern, was die Klassen tun. Wenn Sie das Projekt vergessen oder ein neuer Entwickler ü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önnen CSS-Klassen versehentlich mit Datenklassen duplizieren, was zu seltsamen Stilen auf Ihren Live-Seiten führt.
• Es ist schwieriger, mehrere Datenelemente hinzuzufügen. Wenn Sie über mehrere Datenelemente verfügen, müssen Sie auf diese Weise mit Ihrem JavaScript darauf zugreifen, entweder über den Namen der Klasse oder über die Position in der Klassenliste. Aber es ist leicht durcheinander zu bringen.

Alle anderen von mir vorgeschlagenen Methoden hatten diese und andere Probleme. Da dies jedoch die einzige Möglichkeit war, Daten schnell und einfach einzuschließen, 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 Attribute (gekennzeichnet durch *), 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-Kochzeit, Daten-Mahlzeit. Dies ist der Name Ihrer Daten.

Attribut Vaule Wie jedes andere HTML-Attribut fügen 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-Hauptbestandteil = "Schokolade".

Sie können diese Datenattribute dann auf jedes gewünschte HTML-Element anwenden. Sie können beispielsweise 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.

Aus den Bootstrap-Dokumenten:

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

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

1. Ein Attribut, das mit beginnt, data-wird vom HTML5-Parser nicht analysiert.
2. Bootstrap verwendet das data-toggleAttribut, um eine Kollapsfunktion zu erstellen.

Anwendung : Nur 2 Schritte

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

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

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

Es wird verwendet, um Modalitäten, Registerkarteninhalte, QuickInfos und Popover-Menüs anzuzeigen sowie einen gedrückten Status für eine Umschalttaste festzulegen. Es wird auf verschiedene Arten ohne eine klare Dokumentation verwendet.

Der Zweck des Umschaltens von Daten in Bootstrap besteht darin, dass Sie mit jQuery alle Tags eines bestimmten Typs finden können. 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" auf das Tag setzen 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.

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

Hier finden Sie auch weitere Beispiele für Werte, data-toggledie zugewiesen werden können. Besuchen Sie einfach die Seite und CTRL+Fsuchen Sie dann nach data-toggle.

Bootstrap nutzt HTML5-Standards, um problemlos auf DOM-Elementattribute in Javascript zugreifen zu können.

Daten-*

Bildet eine Klasse von Attributen, sogenannte benutzerdefinierte Datenattribute, mit denen proprietäre Informationen zwischen dem HTML-Code und seiner DOM-Darstellung ausgetauscht werden können, 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 sie.

Referenz