Dieser Artikel erfährt hauptsächlich über das JavaScript -Plug -In - Falten.
1. Übergangseffekt
Über Übergangseffekte
Für einfache Übergangseffekte stellen Sie einfach übergangs.js und andere JS -Dateien zusammen. Wenn Sie eine kompilierte (oder komprimierte) Bootstrap.js -Datei verwenden, müssen Sie sie nicht separat vorstellen.
Was ist drinnen
Transition.js ist ein grundlegender Helfer für das Übergangsereignis und auch eine Simulation der CSS -Übergangseffekte. Es wird von anderen Plug-Ins verwendet, um festzustellen, ob der aktuelle Browser CSS-Übergangseffekte unterstützt.
2. falten
Geben Sie den grundlegenden Stil und flexiblen Unterstützung für Komponenten, die Faltfunktionen wie Akronden und Navigation unterstützen.
Pluginabhängigkeiten
Das Einsturz -Plugin hängt vom Übergangseffekt -Plugin ab.
Fall
Mit dem Faltplug-In wird eine einfache Acron-Komponente durch Erweiterung der Panelkomponente erstellt.
Schauen wir uns zuerst den Effekt an.
Schauen wir uns als nächstes die Implementierung des Codes an.
<div style="margin-top:140px;"> <div id="accordion"> <div> <div> <h4> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item </a> </h4> </div> <div id="collapseOne"> <div> Anim pariatur Klischee Verpackung, Enim Eiusmod High Life AkuSamus Terry Richardson Ad Tintenfisch. 3 Wolf Moon Officialaute, Nicht -Cupidat -Skateboard -Dolor -Brunch. Food Truck Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua legte einen Vogel darauf, Tintenfische ein-Ursprungs-Kaffee Nulla Assumenda Shoreditch et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Produzierter. Ad vegan außereur Butcher Vice Lomo. Leggings Occaecat Craft Beer Farm-to-Table, Roh-Denim-ästhetischer Synthesizer Nesciunt Sie haben wahrscheinlich noch nicht von ihnen gehört. </div> </div> </div> <div> <h4> <a data-toggle = "collapse" data-toggle = "collapse" data-parent = "#akkorion" href = "#collapsetwo"> zusammenlebbarer Gruppenartikel#2 </a> </h4> </> <DivsetWO. Richardson Ad Tintenfisch. 3 Wolf Moon Officialaute, Nicht -Cupidatat -Skateboard -Dolor -Brunch. Food Truck Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua legte einen Vogel darauf, Tintenfische ein-Ursprungs-Kaffee Nulla Assumenda Shoreditch et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Produzierter. Ad vegan außereur Butcher Vice Lomo. Leggings Occaecat Craft Beer Farm-to-Table, Roh-Denim-ästhetischer Synthesizer Nesciunt Sie haben wahrscheinlich noch nicht von ihnen gehört. </div> </div> </div> <div> <h4> <a data-toggle = "collapse" data-toggle = "collapse" data-parent = "#akkorion" href = "#collapsShree"> zusammenkapsible Gruppenartikel#3 </a> </h4> </divrate, divSimit. AkuSamus Terry Richardson Ad Squid. 3 Wolf Moon Offizieller Aute, Nicht -Cupidatat -Skateboard -Dolor -Brunch. Food Truck Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua legte einen Vogel darauf, Tintenfische ein-Ursprungs-Kaffee Nulla Assumenda Shoreditch et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Produzierter. Ad vegan außereur Butcher Vice Lomo. Leggings Occucaecat Craft Beer Farm-to-Table, Roh-Denim-ästhetische Synthesizer Nesciunt Sie wahrscheinlich noch nicht von ihnen gehört haben AkuSamus labour nachhaltige VHS. </div> </div> </div> </div> </div> </div>
Schritt 1: Erstens enthält die äußerste Schicht der Panelgruppe mehrere Gruppen unten.
Schritt 2: Schauen Sie sich einige einfache Gruppen an
<div> <h4> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne"> <div> </div> </div> </div>
Die Struktur eines Panels ist deutlich durch den Code zu sehen.
Panel-Header und Pandl-Body sowie dann können Panel-Header Titel und Links enthalten. Verbinden Sie mit dem Panel-Body über Link.
Schritt 3: Sie können feststellen, dass es in der Panel-Gruppe eine ID = "Akkordeon" gibt, und dann befindet sich in der Link unter jedem Titel ein daten-parent = "#akkorion".
Wenn es entfernt ist, wird der Effekt darin bestehen, dass das Originalfeld nach dem Klicken auf andere Links nicht erneut schrumpfen wird.
Sie können den Effekt der Faltung auf eine andere Weise zeigen.
<div style = "margin-top: 140px;"> <button type = "button" data-toggle = "collapse" data-target = "#Demo"> Einfacher Zusammenbruch </button> <div id = "Demo"> Anim Pariatur Cliche Reforming, Enim Eiusmod High Life Accusamus terry Richardson Ad Squidson. 3 Wolf Moon Offizieller Aute, Non -Cupidat -Skateboard -Dolor -Brunch. Food Truck Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua legte einen Vogel darauf, Tintenfische ein-Ursprungs-Kaffee Nulla Assumenda Shoreditch et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Produzierter. Ad vegan außereur Butcher Vice Lomo. Leggings Occaecat Craft Beer Farm-to-Table, Roh-Denim-ästhetischer Synthetik Nesciunt Sie haben wahrscheinlich noch nicht von ihnen gehört.
Verwendung
Das Falten -Plugin steuert Stile über mehrere einfache Klassen
.Collapse Inhalt ausblenden
.Collapse in Inhalt anzeigen
.Collapsessing. Es wird hinzugefügt, wenn der Übergang beginnt und entfernt wird, wenn er fertig ist, bedeutet wahrscheinlich, dass der Übergangseffekt nach dem Hinzufügen der Falte verfügbar ist. Wenn er entfernt wird, endet er.
Durch Datenattribut
Wenn Sie nur data-toggle = "collapse" und das Datenziel zum Seitenelement hinzufügen, können Sie zusammenkapsible Seitenelemente steuern. Die Data-Target-Eigenschaft akzeptiert einen CSS-Selektor als Steuerobjekt. Stellen Sie sicher, dass Sie dem zusammengebrochenen Seitenelement einen Kollapsklassen hinzufügen. Wenn Sie möchten, dass der Standardzustand des zusammengebrochenen Seitenelements erweitert wird, fügen Sie in der Klasse hinzu.
So fügen Sie einen Controller zu einer Reihe von faltbaren Seitenelementen hinzu, data-parent = "#selector". Bitte beachten Sie das obige Beispiel.
über JavaScript
<button type = "button" "onclick =" open () "> öffnen </button> <button type =" button "onclick =" hide () "> fold </button> <div id =" Demo "> Anim Pariatur Klischee Vertrag, Enim Eiusmod High Life AccuSamus Terry Richardson Ad Squid. 3 Wolf Moon Offizieller Aute, Non -Cupidat -Skateboard -Dolor -Brunch. Food Truck Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua legte einen Vogel darauf, Tintenfische ein-Ursprungs-Kaffee Nulla Assumenda Shoreditch et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labour Wes Anderson Cred Nesciunt Sapiente EA Produzierter. Ad vegan außereur Butcher Vice Lomo. Leggings Occucaecat Craft Beer Farm-to-Table, Roh-Denim-ästhetische Synthesizer Sie haben wahrscheinlich noch nicht von ihnen gehört.
<script type = "text/javaScript"> $ (function () {$ ("#Demo"). Collapse ({Toggle: false})}) Funktion open () {$ ("#Demo"). Collapse ("show"); } function hide () {$ ("#Demo"). Collapse ("Hide"); } </script>Schauen Sie sich den obigen Effekt an
Verfahren
Geben Sie Seitenelemente eine zusammenklappbare Funktion an. Akzeptiert ein optionales Objekt als Argument.
$ ("#Demo"). Zusammenbruch ({Toggle: False})
Auf diese Weise werden die Elemente bei der Initialisierung erweitert.
1. Zusammenbruch ('Schalter') Zeigt oder verbirgt ein zusammenklappbares Seitenelement an.
2.Collapse ('show') zeigt ein zusammenklappbares Seitenelement an.
3.Collapse ('ausblenden') verbirgt ein zusammenklappbares Seitenelement.
Ereignis
Das zusammengebrochene Plugin in Bootstrap enthält eine Reihe von Ereignissen, die angehört werden können.
Dies bindet versteckte Ereignisse an das Element.
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.