Bootstrap - Comprimi plugin

Il plug-in di compressione semplifica la compressione delle divisioni della pagina. Sia che tu lo usi per costruire una navigazione a fisarmonica o scatole di contenuti, consente molte opzioni di contenuto.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del collapse.js. Ciò richiede anche che il plug-in di transizione sia incluso nella tua versione di Bootstrap. Altrimenti, come menzionato nel capitolo Panoramica dei plugin Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Puoi utilizzare il plug-in di compressione:

To create collapsible groups or accordion. Questo può essere creato come nell'esempio di esempio di seguito:

<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 = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>

data-toggle = "collapse" viene aggiunto al collegamento su cui si fa clic per espandere o comprimere il componente.
href o a data-targetl'attributo viene aggiunto al componente genitore, il cui valore è id del componente figlio.
data-parent viene aggiunto l'attributo per creare l'effetto simile a una fisarmonica.

Per creare un semplice pieghevole senza il markup della fisarmonica - Questo può essere creato come nell'esempio di esempio sotto -

<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>

<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

Come puoi vedere nell'esempio abbiamo creato un semplice componente pieghevole, a differenza della fisarmonica, non abbiamo aggiunto l'attributo data-parent.

Utilizzo

La tabella seguente elenca le classi che il plug-in di compressione utilizza per gestire il sollevamento di carichi pesanti:

Sr.No.	Classe e descrizione
1	.collapse Nasconde il contenuto.
2	.collapse.in Mostra il contenuto.
3	.collapsing Viene aggiunto quando inizia la transizione e rimosso al termine.

Puoi utilizzare il plug-in di compressione in due modi:

Via data attributes - Aggiungi data-toggle = "collapse" e a data-targetall'elemento per assegnare automaticamente il controllo di un elemento comprimibile. Ildata-targetl'attributo accetterà un selettore CSS a cui applicare la compressione. Assicurati di aggiungere la classe.collapseall'elemento pieghevole. Se desideri che sia aperto per impostazione predefinita, includi la classe aggiuntiva.in.

Per aggiungere la gestione del gruppo simile a una fisarmonica a un controllo comprimibile, aggiungi l'attributo data data-parent = "#selector".
Via JavaScript - Il metodo di compressione può essere attivato con JavaScript come mostrato di seguito -

$('.collapse').collapse()

Opzioni

Ci sono alcune opzioni che possono essere passate tramite attributi di dati o JavaScript sono elencate nella seguente tabella:

Nome opzione	Tipo / valore predefinito	Nome attributo dati	Descrizione
genitore	selettore Default - false	data-parent	Se selector è falso, tutti gli elementi comprimibili sotto il genitore specificato verranno chiusi (simile al comportamento tradizionale della fisarmonica - questo dipende dalla classe del gruppo della fisarmonica).
toggle	booleano Predefinito: vero	data-toggle	Attiva o disattiva l'elemento pieghevole durante l'invocazione.

Metodi

Di seguito è riportato un elenco di alcuni metodi utili utilizzati con elementi comprimibili.

Metodo	Descrizione	Esempio
Options - .collapse (opzioni)	Attiva il tuo contenuto come elemento comprimibile. Accetta un oggetto opzioni opzionale.	`$('#identifier').collapse({ toggle: false })`
Toggle - .collapse ('toggle')	Consente di visualizzare o nascondere un elemento comprimibile.	`$('#identifier').collapse('toggle')`
Show - .collapse ('mostra')	Mostra un elemento pieghevole.	`$('#identifier').collapse('show')`
Hide - .collapse ('nascondi')	Nasconde un elemento pieghevole.	`$('#identifier').collapse('hide')`

Esempio

Il seguente esempio dimostra l'utilizzo dei metodi:

<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 = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
      
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
  
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>

Eventi

La tabella seguente elenca alcuni eventi che possono essere utilizzati con la funzionalità di compressione.

Evento	Descrizione	Esempio
show.bs.collapse	Sparato dopo che è stato chiamato il metodo show.	`$('#identifier').on('show.bs.collapse', function () { // do something })`
mostrato.bs. collassa	Questo evento viene generato quando un elemento di compressione è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).	`$('#identifier').on('shown.bs.collapse', function () { // do something })`
hide.bs. collassa	Attivato quando è stato chiamato il metodo di istanza hide.	`$('#identifier').on('hide.bs.collapse', function () { // do something })`
hidden.bs. collassa	Questo evento viene generato quando un elemento di compressione è stato nascosto all'utente (attenderà il completamento delle transizioni CSS).	`$('#identifier').on('hidden.bs.collapse', function () { // do something })`

Esempio

L'esempio seguente mostra l'utilizzo degli eventi:

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
   
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
      
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>