Bootstrap - Réduire le plugin

Le plugin de réduction facilite la création de divisions de réduction de la page. Que vous l'utilisiez pour créer une navigation en accordéon ou des zones de contenu, il permet de nombreuses options de contenu.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du collapse.js. Cela nécessite également que le plugin Transition soit inclus dans votre version de Bootstrap. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure le fichier bootstrap.js ou le bootstrap.min.js minifié .

Vous pouvez utiliser le plugin de réduction -

  • To create collapsible groups or accordion. Cela peut être créé comme dans l'exemple ci-dessous -

<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" est ajouté au lien sur lequel vous cliquez pour développer ou réduire le composant.

  • href ou un data-targetL'attribut est ajouté au composant parent, dont la valeur est id du composant enfant.

  • data-parent L'attribut est ajouté pour créer l'effet de type accordéon.

  • Pour créer un simple pliable sans le balisage d'accordéon - Cela peut être créé comme dans l'exemple d'exemple ci-dessous -

<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>

Comme vous pouvez le voir dans l'exemple, nous avons créé un simple composant pliable, contrairement à l'accordéon, nous n'avons pas ajouté l'attribut data-parent.

Usage

Le tableau suivant répertorie les classes que le plugin de réduction utilise pour gérer le gros du travail -

Sr.No. Classe et description
1

.collapse

Cache le contenu.

2

.collapse.in

Affiche le contenu.

3

.collapsing

Est ajouté au début de la transition et supprimé à la fin.

Vous pouvez utiliser le plugin de réduction de deux manières -

  • Via data attributes - Ajouter data-toggle = "collapse" et un data-targetà l'élément pour attribuer automatiquement le contrôle d'un élément réductible. ledata-targetL'attribut acceptera un sélecteur CSS auquel appliquer la réduction. Assurez-vous d'ajouter la classe.collapseà l'élément pliable. Si vous souhaitez qu'il s'ouvre par défaut, incluez la classe supplémentaire.in.

    Pour ajouter une gestion de groupe de type accordéon à un contrôle réductible, ajoutez l'attribut data data-parent = "#selector".

  • Via JavaScript - La méthode de réduction peut être activée avec JavaScript comme indiqué ci-dessous -

$('.collapse').collapse()

Options

Certaines options peuvent être transmises via des attributs de données ou JavaScript sont répertoriées dans le tableau suivant -

Nom de l'option Type / Valeur par défaut Nom d'attribut de données La description
parent sélecteur Par défaut - faux parent de données Si selector est faux, alors tous les éléments réductibles sous le parent spécifié seront fermés (similaire au comportement d'accordéon traditionnel - cela dépend de la classe du groupe d'accordéon).
basculer booléen Valeur par défaut - true bascule de données Active / désactive l'élément réductible lors de l'appel.

Méthodes

Voici une liste de quelques méthodes utiles qui sont utilisées avec des éléments réductibles.

Méthode La description Exemple

Options - .collapse (options)

Active votre contenu en tant qu'élément pliable. Accepte un objet d'options facultatif.
$('#identifier').collapse({
   toggle: false
})

Toggle - .collapse ('basculer')

Bascule un élément réductible sur affiché ou masqué.
$('#identifier').collapse('toggle')

Show - .collapse ('afficher')

Affiche un élément pliable.
$('#identifier').collapse('show')

Hide - .collapse ('cacher')

Masque un élément pliable.
$('#identifier').collapse('hide')

Exemple

L'exemple suivant montre l'utilisation des méthodes -

<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>

Événements

Le tableau suivant répertorie quelques événements pouvant être utilisés avec la fonctionnalité de réduction.

un événement La description Exemple
show.bs.collapse Lancé après l'appel de la méthode show.
$('#identifier').on('show.bs.collapse', function () {
   // do something
})
montré.bs.collapse Cet événement est déclenché lorsqu'un élément de réduction a été rendu visible à l'utilisateur (attendra la fin des transitions CSS).
$('#identifier').on('shown.bs.collapse', function () {
   // do something
})
hide.bs.collapse Lancé lorsque la méthode d'instance hide a été appelée.
$('#identifier').on('hide.bs.collapse', function () {
   // do something
})
hidden.bs.collapse Cet événement est déclenché lorsqu'un élément de réduction a été caché à l'utilisateur (attendra que les transitions CSS se terminent).
$('#identifier').on('hidden.bs.collapse', function () {
   // do something
})

Exemple

L'exemple suivant illustre l'utilisation des événements -

<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>