Bootstrap JS Collasso
Collasso JS (collapse.js)
Ottieni stili di base e supporto flessibile per componenti pieghevoli come fisarmoniche e navigazione.
Dipendenza dal plug-in: Collapse richiede che il plug-in di transizione sia incluso nella tua versione di Bootstrap.
Per un tutorial sui pieghevoli, leggi il nostro tutorial sul collasso di Bootstrap .
Le classi di plug-in Comprimi
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
Via dati-* Attributi
Basta aggiungere data-toggle="collapse" e un data-target all'elemento per assegnare automaticamente il controllo di un elemento comprimibile. L'attributo data-target accetta un selettore CSS a cui applicare la compressione. Assicurati di aggiungere la compressione della classe all'elemento comprimibile. Se desideri che sia aperto di default, aggiungi la classe aggiuntiva in.
Esempio
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Suggerimento: per aggiungere la gestione dei gruppi a fisarmonica a un controllo comprimibile, aggiungi l'attributo dati data-parent="#selector".
Tramite JavaScript
Abilita manualmente con:
$('.collapse').collapse()
Comprimi opzioni
Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungi il nome dell'opzione a data-, come in data-parent="".
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Metodi di collasso
La tabella seguente elenca tutti i metodi di compressione disponibili.
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element |
Comprimi eventi
La tabella seguente elenca tutti gli eventi di compressione disponibili.
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |
Altri esempi
Semplice pieghevole
L'esempio seguente fa in modo che un pulsante alterna il contenuto in espansione e in compressione di un altro elemento:
Esempio
<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>
Pannello pieghevole
L'esempio seguente mostra un pannello comprimibile:
Esempio
<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>
Gruppo elenco comprimibile
Di seguito viene mostrato un pannello comprimibile con un gruppo di elenchi all'interno:
Esempio
<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>
Fisarmonica
L'esempio seguente mostra una semplice fisarmonica estendendo il componente del pannello:
Nota: l' data-parentattributo assicura che tutti gli elementi comprimibili sotto il genitore specificato vengano chiusi quando viene mostrato uno degli elementi comprimibili.
Esempio
<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>
Espandi e comprimi Attiva/disattiva icona e testo
L'esempio seguente modifica il testo e l'icona di apertura/chiusura durante l'apertura e la chiusura del contenuto comprimibile:
Esempio
$(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');
});
});
Oppure puoi usare i CSS:
Esempio
/* 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";
}