Risposte:
È un attributo di dati Bootstrap che collega automaticamente l'elemento al tipo di widget che è. Data- * fa parte delle specifiche html5 e data-toggle è specifico di Bootstrap.
Qualche esempio:
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"Passa attraverso i documenti JavaScript di Bootstrap e cerca il toggle dei dati e lo vedrai usato negli esempi di codice.
Un esempio funzionante:
<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>Qualsiasi attributo che inizia con data- è il prefisso per gli attributi personalizzati utilizzati per uno scopo specifico (tale scopo dipende dall'applicazione). È stato aggiunto come rimedio semantico al forte uso delle persone rele ad altri attributi per scopi diversi da quelli previsti originariamente ( relera spesso usato per conservare i dati per cose come tooltip avanzati).
Nel caso di Bootstrap, non ho familiarità con i suoi meccanismi interni, ma a giudicare dal nome, immagino che sia un gancio per consentire la commutazione della visibilità o forse una modalità dell'elemento a cui è collegato (come il pieghevole barra laterale su Octopress.org ).
html5doctor ha un buon articolo sull'attributo data .
Il ciclo 2 è un altro esempio di ampio uso dell'attributo data .
Ad esempio, supponiamo che stiate creando un'applicazione Web per elencare e visualizzare ricette. È possibile che i clienti siano in grado di ordinare l'elenco, visualizzare le caratteristiche delle ricette e così via prima di scegliere la ricetta da aprire. Per fare ciò, è necessario associare elementi come il tempo di cottura, l'ingrediente principale, la posizione del pasto e così via all'interno dell'elenco degli elementi per le ricette.
<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>Al fine di ottenere tali informazioni nella pagina, è possibile fare molte cose diverse. È possibile aggiungere commenti a ciascun elemento LI, è possibile aggiungere attributi rel alle voci dell'elenco, è possibile posizionare tutte le ricette in cartelle separate in base a ora, pasto e ingrediente (ad es.). La soluzione adottata dalla maggior parte degli sviluppatori è stata quella di utilizzare gli attributi di classe per archiviare informazioni sull'elemento corrente. Questo ha diversi vantaggi:
Ma ci sono alcuni importanti svantaggi di questo metodo:
Tutti gli altri metodi che ho suggerito hanno avuto questi problemi e altri. Ma poiché era l'unico modo per includere rapidamente e facilmente i dati, è quello che abbiamo fatto. Attributi di dati HTML5 al salvataggio
HTML5 ha aggiunto un nuovo tipo di attributo a qualsiasi elemento: l'elemento dati personalizzato (data- *). Questi sono attributi personalizzati (indicati con *) che è possibile aggiungere agli elementi HTML per definire qualsiasi tipo di dati desiderato. Sono composti da due parti:
Nome attributo Questo è il nome dell'attributo. Deve contenere almeno un carattere minuscolo e deve avere il prefisso data-. Ad esempio: ingrediente-principale-dati, tempo di cottura dei dati, pasto dei dati. Questo è il nome dei tuoi dati.
Attributo Vaule Come ogni altro attributo HTML, includi i dati stessi tra virgolette separati da un segno di uguale. Questi dati possono essere qualsiasi stringa valida in una pagina Web. Ad esempio: data-main-ingrediente = "cioccolato".
È quindi possibile applicare questi attributi di dati a qualsiasi elemento HTML desiderato. Ad esempio, è possibile definire le informazioni nell'elenco di esempio sopra:
<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>Una volta che hai queste informazioni nel tuo HTML, sarai in grado di accedervi con JavaScript e manipolare la pagina in base a tali dati.
<!--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>Sono state fornite così tante risposte, ma non arrivano al punto. Risolviamo questo.
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
Al punto
data-non viene analizzato dal parser HTML5.data-toggleattributo per creare la funzionalità di compressione.Come usare : solo 2 passaggi
class="collapse"all'elemento #Ache vuoi comprimere.data-target="#A"e data-toggle="collapse".Scopo: l' data-toggleattributo ci consente di creare un controllo per comprimere / espandere un div(blocco) se utilizziamo Bootstrap.
La presenza di questo attributo di dati indica a Bootstrap di alternare gli stati visivi o logici di un altro elemento nell'interazione dell'utente.
Viene utilizzato per mostrare modali, contenuto della scheda, descrizioni comandi e menu popover, nonché impostare uno stato premuto per un pulsante di attivazione / disattivazione. Viene utilizzato in più modi senza una chiara documentazione.
Lo scopo di alternare i dati in bootstrap è quindi di poter usare jQuery per trovare tutti i tag di un certo tipo. Ad esempio, inserisci data-toggle = "popover" in tutti i tag popover e quindi puoi utilizzare un selettore JQuery per trovare tutti quei tag ed eseguire la funzione popover () per inizializzarli. Puoi anche mettere class = "myPopover" sul tag e usare il selettore .myPopover per fare la stessa cosa. La documentazione è confusa, perché sembra che stia succedendo qualcosa di speciale con quell'attributo.
Questo
<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>funziona benissimo.
Bootstrap sfrutta gli standard HTML5 per accedere facilmente agli attributi dell'elemento DOM all'interno di javascript.
Forma una classe di attributi, chiamati attributi di dati personalizzati, che consentono lo scambio di informazioni proprietarie tra l'HTML e la sua rappresentazione DOM che possono essere utilizzate dagli script. Tutti questi dati personalizzati sono disponibili tramite l'interfaccia HTMLElement dell'elemento su cui è impostato l'attributo. La proprietà HTMLElement.dataset consente di accedervi.