Bootstrap doit apprendre à plier tous les jours_javascript

Cet article se concentre principalement sur l'apprentissage du pliage de plug-ins JavaScript.
1. Effet de transition
À propos des effets de transition
Pour des effets de transition simples, introduisez simplement transition.js avec d'autres fichiers JS. Si vous utilisez le fichier bootstrap.js compilé (ou compressé), il n'est pas nécessaire de l'importer séparément.
Ce qu'il y a à l'intérieur
Transition.js est une aide de base pour l'événement transitionEnd, et c'est également une simulation des effets de transition CSS. Il est utilisé par d'autres plug-ins pour détecter si le navigateur actuel prend en charge les effets de transition CSS.
2. Pliez
Donnez un style de base et un support flexible aux composants prenant en charge la fonctionnalité de pliage, tels que les accordéons et la navigation.

Dépendances du plug-in

Le plug-in pliable s'appuie sur le plug-in d'effet de transition.

Cas
À l'aide du plug-in pliable, un simple composant accordéon est construit en étendant le composant panneau.
Jetons d’abord un coup d’œil à l’effet.

Jetons un coup d'œil à l'implémentation du code.

<div class="container" style="margin-top:140px;">
  <div class="panel-group" id="accordion">
  <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
   <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item </a>
   </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in">
   <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
  </div>
  </div>
  <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
   <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a>
   </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
   <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
  </div>
  </div>
  <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
   <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a>
   </h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse">
   <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
  </div>
  </div>
 </div>
 </div>

Première étape : Tout d'abord, le calque le plus externe, le groupe de panneaux, comprend plusieurs groupes en dessous de ce calque.
Étape 2 : Jetez un œil à quelques groupes simples

<div class="panel panel-default">
 <div class="panel-heading">
  <h4 class="panel-title">
  <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a>
  </h4>
 </div>
 <div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
  </div>
 </div>
</div>

La structure d'un panneau est clairement visible à travers le code.
panel-header et pandl-body, et panel-header peuvent contenir des titres et des liens. Connecté au corps du panneau via un lien.
Étape 3 : Vous pouvez constater qu'il y a un id="accordion" dans le groupe de panneaux, puis un data-parent="#accordion" dans le lien sous chaque titre ci-dessous.
S'il est supprimé, l'effet sera qu'après avoir cliqué sur d'autres liens, le panneau d'origine ne rétrécira plus.
Vous pouvez montrer l’effet du pliage d’une autre manière.

 <div class="container" style="margin-top:140px;">
 <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"> simple collapsible </button>

<div id="demo" class="collapse in">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>

Utilisation
Le plug-in pliable contrôle le style à travers quelques classes simples
.collapse masquer le contenu
.collapse dans Afficher le contenu
.s'effondrer. Il est ajouté lorsque la transition commence et supprimé lorsqu'elle se termine. Cela signifie probablement que l'effet de transition est là après l'ajout du pli, puis il se termine lorsqu'il est supprimé.
Via l'attribut de données
Vous pouvez donner à un élément de page la possibilité de contrôler la réduction simplement en y ajoutant data-toggle="collapse" et data-target. L'attribut data-target accepte un sélecteur CSS comme objet de contrôle. Assurez-vous d'ajouter une classe de réduction pour les éléments de page pliables. Si vous souhaitez que l'état par défaut d'un élément de page pliable soit développé, ajoutez-le en classe.
Pour ajouter un contrôleur à un groupe d'éléments de page pliables, ajoutez data-parent="#selector". Référez-vous simplement à l’exemple ci-dessus.
Via JavaScript

<button type="button" class="btn btn-danger" onClick="Open()">打开</button>
<button type="button" class="btn btn-danger" onClick="Hide()">折叠</button>

<div id="demo" class="collapse in">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> <div class="panel-group" id="accordion" style="margin-top:240px;">

 <script type="text/javascript"> $(function(){
   $("#demo").collapse({
 toggle: false })
  }) 
  function Open(){
  $("#demo").collapse("show");
  }
 function Hide(){
  $("#demo").collapse("hide");
  } </script>

Jetons un coup d'œil à l'effet ci-dessus

Méthode
Donnez aux éléments de page une fonctionnalité pliable. Accepte un objet facultatif comme paramètre.
$("#demo").collapse({toggle: false})
De cette façon, l'élément sera développé une fois initialisé.
1.collapse('toggle') affiche ou masque un élément de page pliable.
2.collapse('show') affiche un élément de page pliable.
3.collapse('hide') masque un élément de page pliable.
Événement
Le plug-in pliable dans Bootstrap expose un ensemble d'événements qui peuvent être écoutés.

Cela lie l'événement caché à l'élément.
Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.