javascript - Atributele data-toggle în Twitter Bootstrap

Ce fac atributele data-toggle în Twitter Bootstrap? Nu am putut găsi un răspuns în API-ul Bootstrap.

Am mai văzut o întrebare similară înainte, link. Dar nu m-a ajutat prea mult.

Răspuns #1

Este un atribut de date Bootstrap care conectează automat elementul tipului de widget pe care îl reprezintă. Data-* face parte din specificația HTML5, iar data-toggle este specific pentru Bootstrap.

Câteva exemple:

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

Parcurge documentația Bootstrap JavaScript și caută data-toggle și vei vedea că este folosit în exemplele de cod.

Un exemplu funcțional:

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

Răspunsul #2

Orice atribut care începe cu data- este prefixul pentru atribute personalizate folosite pentru un anumit scop specific (acel scop depinde de aplicație). A fost adăugat ca o soluție semantică pentru utilizarea frecventă a rel și a altor atribute în scopuri diferite de cele inițial intenționate (rel era adesea folosit pentru a stoca date pentru lucruri precum tooltip-uri avansate).

În cazul Bootstrap, nu sunt familiarizat cu modul său intern de funcționare, dar judecând după nume, aș ghici că este un cârlig care permite comutarea vizibilității sau poate un mod al elementului la care este atașat (cum ar fi bara laterală pliabilă de pe Octopress.org).

html5doctor are un articol bun despre atributul data-.

Ciclul 2 este un alt exemplu de utilizare extensivă a atributului data-.

Răspunsul #3

De exemplu, să presupunem că creați o aplicație web pentru a lista și afișa rețete. Este posibil să doriți ca clienții dvs. să poată sorta lista, să afișeze caracteristicile rețetelor și așa mai departe înainte de a alege rețeta pe care să o deschidă. Pentru a face acest lucru, trebuie să asociați lucruri precum timpul de gătire, ingredientul principal, poziția mesei și așa mai departe chiar în interiorul elementelor listei pentru rețete.

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

Pentru a introduce acea informație în pagină, ai putea face multe lucruri diferite. Ai putea adăuga comentarii fiecărui element LI, ai putea adăuga atribute rel elementelor din listă, ai putea plasa toate rețetele în foldere separate în funcție de timp, masă și ingredient (adică ). Soluția pe care majoritatea dezvoltatorilor au adoptat-o a fost să folosească atributele class pentru a stoca informații despre elementul curent. Acest lucru are mai multe avantaje:

  • Poți stoca mai multe clase pe un element
  • Numele claselor pot fi lizibile pentru oameni
  • Este ușor să accesezi clasele cu JavaScript (className)
  • Clasa este asociată cu elementul pe care se află

Dar există câteva dezavantaje majore ale acestei metode:

  • Trebuie să-ți amintești ce fac clasele. Dacă uiți sau un dezvoltator nou preia proiectul, clasele ar putea fi eliminate sau schimbate fără să realizeze că asta afectează modul în care rulează aplicația.
  • Clasele sunt folosite și pentru stilizare cu CSS, și s-ar putea să dublezi clasele CSS cu clase de date din greșeală, ajungând cu stiluri ciudate pe paginile tale live.
  • Este mai dificil să adaugi mai multe elemente de date. Dacă ai mai multe elemente de date, trebuie să ai acces la ele într-un fel cu JavaScript-ul tău, fie după numele clasei, fie după poziția în lista claselor. Dar este ușor să greșești.

Toate celelalte metode pe care le-am sugerat aveau aceste probleme, precum și altele. Dar, deoarece era singura modalitate de a include date rapid și ușor, asta am făcut. Atributele de date HTML5 vin în ajutor

HTML5 a adăugat un nou tip de atribut pentru orice element—elementul de date personalizat (data-*). Acestea sunt atribute personalizate (indicate de *) pe care le puteți adăuga elementelor dvs. HTML pentru a defini orice tip de date doriți. Ele constau din două părți:

Numele atributului Acesta este numele atributului. Trebuie să aibă cel puțin un caracter litera mică și să aibă prefixul data-. De exemplu: data-main-ingredient, data-cooking-time, data-meal. Acesta este numele datelor tale.

Valoarea atributului La fel ca orice alt atribut HTML, includeți datele propriu-zise între ghilimele, separate printr-un semn egal. Aceste date pot fi orice șir de caractere valid pe o pagină web. De exemplu: data-main-ingredient="ciocolată".

Poți apoi să aplici aceste atribute de date oricărui element HTML pe care îl dorești. De exemplu, ai putea defini informațiile din lista de exemplu de mai sus:

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

Odată ce aveți acea informație în HTML-ul dvs., veți putea să o accesați cu JavaScript și să manipulați pagina pe baza acelor date.

Răspunsul #4

Din documentația 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>

Răspunsul #5

Au fost date atât de multe răspunsuri, dar ele nu ajung la subiect. Hai să rezolvăm asta.

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

La obiect

  1. Orice atribut care începe cu data- nu este analizat de parser-ul HTML5.
  2. Bootstrap folosește atributul data-toggle pentru a crea funcționalitate de colaps.

Cum să folosești: Doar 2 pași

  1. Adaugă class="collapse" la elementul #A pe care vrei să-l restrângi.
  2. Adăugați data-target="#A" și data-toggle="collapse".

Scop: atributul data-toggle ne permite să creăm un control pentru a restrânge/extinde un div (bloc) dacă folosim Bootstrap.