JS Collapse (collapse.js)
Obțineți stiluri de bază și suport flexibil pentru componente pliabile, cum ar fi acordeoane și de navigare.
Plugin dependență: Colaps necesită tranzițiile plugin pentru a fi incluse în versiunea de Bootstrap.
Pentru un tutorial despre Collapsibles, citiți Bootstrap Collapse Tutorial .
The Collapse Plugin Classes
| Clasă | Descriere | Exemplu |
|---|---|---|
| .collapse | Ascunde conținutul | Incearca-l |
| .collapse in | Afișează conținutul | Incearca-l |
| .collapsing | Adăugat când începe tranziția, și eliminate atunci când se termină | Incearca-l |
Via data-* Atribute
Trebuie doar să adăugați data-toggle="collapse" de data-toggle="collapse" și-țintă de date elementului pentru a atribui în mod automat de control al unui element pliabil. De data-target atribut acceptă un selector CSS pentru a aplica colapsul a. Asigurați-vă că pentru a adăuga prăbușirea clasa elementului pliabil. Dacă doriți să implicit deschis, adăugați clasa suplimentară.
Exemplu
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Încearcă - l singur » Indicație: Pentru a adăuga managementul grupului de tip acordeon la un control pliabil, adăugați data atribut de data-parent="#selector" .
Via JavaScript
Activați manual cu:
$('.collapse').collapse()Opțiuni colaps
Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atribute de date, adăugați numele opțiune pentru a datelor, la fel ca în data-parent="" .
| Nume | Tip | Mod implicit | Descriere |
|---|---|---|---|
| parent | selector | false | Toate elementele pliabile sub mamă specificată va fi închisă atunci când este afișat acest element pliabil. (Similar cu comportamentul tradițional acordeon - aceasta depinde de clasa de panou) - A se vedea exemplul de mai jos |
| toggle | boolean | true | Comută elementul pliabil pe invocare |
Metode Restrângeți
Tabelul următor listează metodele de colaps toate disponibile.
| Metodă | Descriere | Incearca-l |
|---|---|---|
| . collapse( options ) | Activează elementul pliabil cu o opțiune. A se vedea optiunile de mai sus pentru valori valide | |
| . collapse("toggle") | Comută elementul pliabil | Incearca-l |
| . collapse("show") | Afișează elementul pliabil | Incearca-l |
| . collapse("hide") | Ascunde elementul pliabil | Incearca-l |
Restrângeți Evenimente
Tabelul următor listează evenimente colaps toate disponibile.
| Eveniment | Descriere | Incearca-l |
|---|---|---|
| show.bs.collapse | Are loc atunci când elementul pliabil este pe cale să fie afișat | Incearca-l |
| shown.bs.collapse | Are loc atunci când elementul rabatabil este complet prezentat (după tranzițiile CSS au finalizat) | Incearca-l |
| hide.bs.collapse | Are loc atunci când elementul pliabil este pe cale să fie ascunsă | Incearca-l |
| hidden.bs.collapse | Are loc atunci când elementul rabatabil este complet ascuns (după tranzițiile CSS au finalizat) | Incearca-l |
Exemple
Simplu pliabilă
Următorul exemplu face un buton comuta conținutul în expansiune și a deformării alt element:
Exemplu
<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> Încearcă - l singur » Panou pliabilă
Exemplul următor prezintă un panou pliabil:
Exemplu
<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> Încearcă - l singur » Pliabilă Lista grupurilor
Următoarele prezintă un panou pliabil cu un grup listă interior:
Exemplu
<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> Încearcă - l singur » Acordeon
Exemplul următor prezintă un acordeon simplu prin extinderea componentei panoului:
Notă: data-parent atribut se asigură că toate elementele pliabile sub mamă specificată va fi închisă atunci când este afișat unul dintre elementul pliabil.
Exemplu
<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> Încearcă - l singur » Extindere și Restrângere Comutare Icon & text
Următorul exemplu modifică textul de deschidere / închidere și pictograma la deschiderea și închiderea conținutului pliabil:
Exemplu
$(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');
});
}); Încearcă - l singur » Sau puteți utiliza CSS:
Exemplu
/* 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";
} Încearcă - l singur »