Bootstrap muss jeden Tag Falten lernen_Javascript-Fähigkeiten

Dieser Artikel konzentriert sich hauptsächlich auf das Erlernen des JavaScript-Plug-in-Foldings.
1. Übergangseffekt
Über Übergangseffekte
Für einfache Übergangseffekte führen Sie einfach transit.js zusammen mit anderen JS-Dateien ein. Wenn Sie die kompilierte (oder komprimierte) Datei „bootstrap.js“ verwenden, ist ein separater Import nicht erforderlich.
Was ist drin
Transition.js ist ein grundlegender Helfer für das TransitionEnd-Ereignis und eine Simulation von CSS-Übergangseffekten. Es wird von anderen Plug-Ins verwendet, um zu erkennen, ob der aktuelle Browser CSS-Übergangseffekte unterstützt.
2. Falten
Geben Sie Komponenten, die Faltfunktionen unterstützen, wie z. B. Akkordeons und Navigation, ein grundlegendes Design und flexible Unterstützung.

Plug-in-Abhängigkeiten

Das Falt-Plug-in basiert auf dem Übergangseffekt-Plug-in.

Fall
Mit dem Falt-Plugin wird durch Erweitern des Panel-Bauteils ein einfaches Akkordeon-Bauteil aufgebaut.
Schauen wir uns zunächst die Wirkung an.

Werfen wir einen Blick auf die Implementierung des Codes.

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

Schritt eins: Zunächst umfasst die äußerste Ebene, die Panel-Gruppe, mehrere Gruppen unterhalb dieser Ebene.
Schritt 2: Schauen Sie sich ein paar einfache Gruppen an

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

Die Struktur eines Panels ist durch den Code deutlich zu erkennen.
Panel-Header und Pandl-Body, und Panel-Header können Titel und Links enthalten. Über eine Verbindung mit dem Panelkörper verbunden.
Schritt 3: Sie können feststellen, dass es in der Panel-Gruppe ein id="accordion" und dann im Link unter jedem Titel unten ein data-parent="#accordion" gibt.
Wenn es entfernt wird, hat dies zur Folge, dass das ursprüngliche Panel nach dem Klicken auf andere Links nicht mehr verkleinert wird.
Sie können den Effekt des Faltens auf andere Weise zeigen.

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

Nutzung
Das Falt-Plug-in steuert den Stil durch ein paar einfache Klassen
.Inhalt ausblenden reduzieren
.einklappen in Inhalt anzeigen
.kollabiert. Es wird hinzugefügt, wenn der Übergang beginnt, und entfernt, wenn er beendet ist. Dies bedeutet wahrscheinlich, dass der Übergangseffekt vorhanden ist, nachdem die Falte hinzugefügt wurde, und dann endet, wenn er entfernt wird.
Durch Datenattribut
Sie können einem Seitenelement die Möglichkeit geben, das Reduzieren zu steuern, indem Sie ihm einfach data-toggle="collapse" und data-target hinzufügen. Das data-target-Attribut akzeptiert einen CSS-Selektor als Kontrollobjekt. Stellen Sie sicher, dass Sie eine Minimierungsklasse für reduzierbare Seitenelemente hinzufügen. Wenn Sie möchten, dass der Standardstatus eines reduzierbaren Seitenelements erweitert wird, fügen Sie eine Klasse hinzu.
Um einen Controller zu einer Gruppe reduzierbarer Seitenelemente hinzuzufügen, fügen Sie data-parent="#selector" hinzu. Beziehen Sie sich einfach auf das obige Beispiel.
Über 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>

Sehen wir uns den Effekt oben an

Methode
Geben Sie Seitenelementen eine zusammenklappbare Funktionalität. Akzeptiert ein optionales Objekt als Parameter.
$("#demo").collapse({toggle: false})
Auf diese Weise wird das Element bei der Initialisierung erweitert.
1.collapse('toggle') zeigt ein reduzierbares Seitenelement an oder verbirgt es.
2.collapse('show') zeigt ein reduzierbares Seitenelement an.
3.collapse('hide') verbirgt ein reduzierbares Seitenelement.
Veranstaltung
Das Falt-Plug-in in Bootstrap stellt eine Reihe von Ereignissen bereit, die abgehört werden können.

Dadurch wird das ausgeblendete Ereignis an das Element gebunden.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.