Atrybuty przełączania danych w Bootstrap na Twitterze

Co robią data-toggleatrybuty w Twitter Bootstrap? Nie mogłem znaleźć odpowiedzi w interfejsie API Bootstrap.

Widziałem też podobne pytanie, link . Ale niewiele mi to pomogło.

Jest to atrybut danych Bootstrap, który automatycznie łączy element z typem widgetu. Dane- * jest częścią specyfikacji HTML5, a przełączanie danych jest specyficzne dla Bootstrap.

Kilka przykładów:

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

Przejrzyj dokumentację JavaScript Bootstrap i wyszukaj przełączanie danych, a zobaczysz, że został użyty w przykładach kodu.

Jeden działający przykład:

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

Każdy atrybut, który zaczyna się od, data-jest prefiksem niestandardowych atrybutów używanych w określonym celu (cel ten zależy od aplikacji). Został on dodany jako środek semantyczny do intensywnego wykorzystywania przez ludzi reli innych atrybutów do celów innych niż ich pierwotne zamierzone cele ( relczęsto był używany do przechowywania danych dla takich rzeczy, jak zaawansowane podpowiedzi).

W przypadku Bootstrap nie jestem zaznajomiony z jego wewnętrznym działaniem, ale sądząc po nazwie, domyślam się, że jest to haczyk, który pozwala przełączać widoczność lub może tryb elementu, do którego jest przymocowany (na przykład składany pasek boczny na Octopress.org ).

html5doctor ma dobry artykuł na temat atrybutu danych .

Cykl 2 to kolejny przykład szerokiego zastosowania atrybutu danych .

Załóżmy na przykład, że tworzysz aplikację internetową do wyświetlania i wyświetlania przepisów. Możesz chcieć, aby Twoi klienci mogli sortować listę, wyświetlać funkcje przepisów itp., Zanim wybiorą przepis, który chcesz otworzyć. Aby to zrobić, musisz powiązać takie rzeczy jak czas gotowania, główny składnik, pozycja posiłku itp. Bezpośrednio w elementach listy przepisów.

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

Aby przenieść te informacje na stronę, możesz zrobić wiele różnych rzeczy. Możesz dodawać komentarze do każdego elementu LI, możesz dodawać atrybuty rel do elementów listy, możesz umieszczać wszystkie przepisy w osobnych folderach na podstawie czasu, posiłku i składnika (tj.). Rozwiązaniem przyjętym przez większość programistów było użycie atrybutów klasy do przechowywania informacji o bieżącym elemencie. Ma to kilka zalet:

• Możesz przechowywać wiele klas w elemencie
• Nazwy klas mogą być czytelne dla człowieka
• Dostęp do klas jest łatwy dzięki JavaScript (className)
• Klasa jest powiązana z elementem, na którym jest włączona

Istnieją jednak poważne wady tej metody:

• Musisz pamiętać, co robią klasy. Jeśli zapomnisz lub nowy programista przejmie projekt, klasy mogą zostać usunięte lub zmienione bez uświadomienia sobie, że ma to wpływ na działanie aplikacji.
• Klasy są również używane do stylizacji za pomocą CSS i możesz przez pomyłkę powielić klasy CSS z klasami danych, co skończy się dziwnymi stylami na twoich stronach.
• Trudniej jest dodać wiele elementów danych. Jeśli masz wiele elementów danych, musisz uzyskać do nich dostęp w sposób JavaScript za pomocą nazwy klasy lub pozycji na liście klas. Ale łatwo jest zepsuć.

Wszystkie inne metody, które zasugerowałem, miały te problemy, a także inne. Ale ponieważ był to jedyny sposób na szybkie i łatwe dołączanie danych, właśnie to zrobiliśmy. Atrybuty danych HTML5 na Rescue

HTML5 dodał nowy typ atrybutu do dowolnego elementu - niestandardowy element danych (data- *). Są to niestandardowe (oznaczone *) atrybuty, które można dodać do elementów HTML w celu zdefiniowania dowolnego rodzaju danych. Składają się z dwóch części:

Nazwa atrybutu Jest to nazwa atrybutu. Musi to być co najmniej jeden mały znak i prefiks data-. Na przykład: główny składnik danych, czas gotowania danych, posiłek danych. To jest nazwa twoich danych.

Atrybut Vaule Jak każdy inny atrybut HTML, dane są umieszczane w cudzysłowach oddzielonych znakiem równości. Te dane mogą być dowolnym ciągiem, który jest prawidłowy na stronie internetowej. Na przykład: data-main-component = "czekolada".

Następnie możesz zastosować te atrybuty danych do dowolnego elementu HTML, który chcesz. Na przykład możesz zdefiniować informacje na powyższej liście przykładów:

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

Kiedy już znajdziesz te informacje w swoim HTML, będziesz mógł uzyskać do nich dostęp za pomocą JavaScript i manipulować stroną na podstawie tych danych.

Z Dokumentów 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>

Podano tak wiele odpowiedzi, ale nie dochodzą one do sedna. Naprawmy to.

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

Do rzeczy

1. Żaden atrybut zaczynający się od data-nie jest analizowany przez analizator składni HTML5.
2. Bootstrap używa tego data-toggleatrybutu do utworzenia funkcji zwijania.

Sposób użycia : tylko 2 kroki

1. Dodaj class="collapse"do elementu, #Aktóry chcesz zwinąć.
2. Dodaj data-target="#A"i data-toggle="collapse".

Cel: data-toggleatrybut pozwala nam utworzyć kontrolkę, aby zwinąć / rozwinąć div(blok), jeśli użyjemy Bootstrap.

Obecność tego atrybutu danych informuje Bootstrap, aby przełączał się między stanem wizualnym lub logicznym innego elementu podczas interakcji użytkownika.

Służy do wyświetlania modów, zawartości kart, podpowiedzi i menu podręcznych, a także do ustawiania stanu naciśnięcia przycisku przełączania. Jest używany na wiele sposobów bez jasnej dokumentacji.

Funkcja przełączania danych w bootstrapie pozwala na użycie jQuery do znalezienia wszystkich znaczników określonego typu. Na przykład wstawiasz data-toggle = "popover" we wszystkich tagach popover, a następnie możesz użyć selektora JQuery, aby znaleźć wszystkie te tagi i uruchomić funkcję popover (), aby je zainicjować. Równie dobrze możesz umieścić class = "myPopover" na znaczniku i użyć selektora .myPopover, aby zrobić to samo. Dokumentacja jest myląca, ponieważ wydaje się, że z tym atrybutem dzieje się coś specjalnego.

To

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

działa dobrze.

Jest to atrybut danych HTML5 zdefiniowany przez Bootstrap. Wiąże przycisk ze zdarzeniem.

Tutaj możesz także znaleźć więcej przykładów wartości, które data-togglemożna przypisać. Wystarczy odwiedzić stronę, a następnie CTRL+Fwyszukać data-toggle.

Bootstrap wykorzystuje standardy HTML5 w celu łatwego dostępu do atrybutów elementu DOM w javascript.

dane-*

Tworzy klasę atrybutów, zwanych niestandardowymi atrybutami danych, które umożliwiają wymianę zastrzeżonych informacji między HTML a jego reprezentacją DOM, które mogą być używane przez skrypty. Wszystkie takie niestandardowe dane są dostępne za pośrednictwem interfejsu HTMLElement elementu, na którym ustawiony jest atrybut. Dostęp do nich zapewnia właściwość HTMLElement.dataset.

Odniesienie