JS Collapse (collapse.js)
Uzyskaj style podstawową i elastyczną obsługę składanych elementów, takich jak akordeony i nawigacji.
Plugin zależność: Collapse wymaga przejścia wtyczkę być zawarte w wersji startowej.
Samouczek o Collapsibles, przeczytaj naszą Bootstrap Collapse Tutorial .
The Collapse Plugin Classes
| Klasa | Opis | Przykład |
|---|---|---|
| .collapse | Ukrywa zawartości | Spróbuj |
| .collapse in | Pokazuje zawartość | Spróbuj |
| .collapsing | Dodano po uruchomieniu przejścia i usunięte po jego zakończeniu | Spróbuj |
Via data-* Atrybuty
Wystarczy dodać data-toggle="collapse" i data-cel do elementu, aby automatycznie przydzielić kontrolę składanego elementu. Atrybut danych docelową akceptuje selektora CSS dla zawalenie się. Pamiętaj, aby dodać upadek klasy do elementu składanego. Jeśli chcesz, to domyślnie otwarty, dodać dodatkową klasę w.
Przykład
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Spróbuj sam " Wskazówka: Aby dodać zarządzanie grupą akordeon podobny do składanego kontroli, dodać atrybut danych data-parent="#selector" .
za pośrednictwem JavaScript
Włącz ręcznie za pomocą:
$('.collapse').collapse()Collapse Opcje
Opcje mogą być przekazywane za pomocą atrybutów danych lub JavaScript. Dla atrybutów danych, nazwy opcji dołączania do teleinformatyczny, jak w data-parent="" .
| Nazwa | Rodzaj | Zaniedbanie | Opis |
|---|---|---|---|
| parent | selector | false | Wszystkie elementy składane w ramach określonego rodzica zostaną zamknięte, kiedy ta pozycja jest składany pokazane. (Podobny do tradycyjnego postępowania akordeon - zależy to od klasy panel) - patrz przykład niżej |
| toggle | boolean | true | Przełączenie składany element na pw |
Metody Collapse
Poniższa tabela zawiera listę wszystkich dostępnych metod upadku.
| metoda | Opis | Spróbuj |
|---|---|---|
| .collapse( options ) | Aktywuje składany element z opcja. Patrz wyżej opcje dla prawidłowych wartości | |
| .collapse("toggle") | Przełączenie element składany | Spróbuj |
| .collapse("show") | Pokazuje element składany | Spróbuj |
| .collapse("hide") | Ukrywa element składany | Spróbuj |
Collapse Wydarzenia
Poniższa tabela zawiera listę wszystkich dostępnych wydarzeń upadku.
| Zdarzenie | Opis | Spróbuj |
|---|---|---|
| show.bs.collapse | Występuje, gdy element składany ma być przedstawiony | Spróbuj |
| shown.bs.collapse | Występuje, gdy element składany jest w pełni pokazane (po zakończeniu przejścia CSS) | Spróbuj |
| hide.bs.collapse | Występuje, gdy element składany ma być ukryty | Spróbuj |
| hidden.bs.collapse | Występuje, gdy element składany jest całkowicie ukryty (po zakończeniu przejścia CSS) | Spróbuj |
Przykłady
proste Składany
Poniższy przykład powoduje przycisk przełącza Rozwijanie i zwijanie zawartości innego elementu:
Przykład
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo">
Simple collapsible
</button>
<div id="demo"
class="collapse in">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div> Spróbuj sam " Składany panel
Poniższy przykład pokazuje, składany panel:
Przykład
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<div
class="panel-body">Panel Body</div>
<div
class="panel-footer">Panel Footer</div>
</div>
</div>
</div> Spróbuj sam " Składany Lista grup
Poniżej przedstawiono składany panel z grupy listy wewnątrz:
Przykład
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<ul
class="list-group">
<li
class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div> Spróbuj sam " Akordeon
Poniższy przykład pokazuje prosty akordeonie poprzez rozszerzenie komponentu Panel:
Uwaga: data-parent cecha daje pewność, że wszystkie elementy składane w ramach określonego rodzica zostanie zamknięta, gdy jedna z pozycji składany jest pokazana.
Przykład
<div class="panel-group" id="accordion">
<div class="panel
panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible
Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse
collapse in">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible
Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible
Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div> Spróbuj sam " Rozwijać i zwijać Przełącz Ikona i tekst
Poniższy przykład zmienia otwierania / zamykania tekst i ikony podczas otwierania i zamykania składaną treść:
Przykład
$(document).ready(function(){
$("#demo").on("hide.bs.collapse",
function(){
$(".btn").html('<span class="glyphicon
glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span
class="glyphicon glyphicon-collapse-up"></span> Close');
});
}); Spróbuj sam " Lub można użyć CSS:
Przykład
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content
is hidden */
.btn.collapsed:after {
content: "\e080";
} Spróbuj sam "