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>