Bootstarp erstellt zusammenklappbare Komponenten_Javascript-Tipps
In diesem Artikel erfahren Sie, wie Sie mit Bootstarp zusammenklappbare Komponenten erstellen. Der spezifische Inhalt ist wie folgt
Was ist erforderlich
Sie müssen auf jquery.js und bootstrap-collapse.js verweisen – beide JavaScript-Dateien befinden sich im Ordner docs/assets/js.
Sie können reduzierbare Komponenten erstellen, ohne viel JavaScript zu schreiben oder JavaScript aufzurufen.
Beispiel
Das erste Beispiel zeigt, wie man eine reduzierbare Komponente erstellt, ohne JavaScript aufzurufen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>collapsible example</title>
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Click me to exapand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>
Erklärung
Hier sind drei Punkte zu beachten. Fügen Sie zunächst data-toggle="collapse" zu dem Link hinzu, auf den Sie klicken möchten, um die Komponente zu erweitern oder zu reduzieren.
Zweitens fügen Sie der übergeordneten Komponente ein href- oder Datenzielattribut hinzu, dessen Wert die ID der untergeordneten Komponente ist.
Drittens fügen Sie ein übergeordnetes Datenattribut hinzu, um einen Akkordeoneffekt zu erzeugen. Der Wert des data-parent-Attributs ist derselbe wie der Wert des id-Attributs des Hauptcontainer-Div (das die gesamte Accordion-Komponente enthält). Wenn Sie eine einfache Akkordeonkomponente erstellen möchten, die nicht so komplex wie ein Akkordeon sein muss, müssen Sie diese Eigenschaft nicht hinzufügen.
Beispiel
Das zweite Beispiel zeigt, wie man eine einfache zusammenklappbare Komponente erstellt.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>collapsible via JavaScript example</title> <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe. </div> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
Aufruf über JavaScript
Sie können den folgenden Code verwenden, um die Minimierung über JavaScript auszulösen.
$(".collapse").collapse() Optionen, Methoden und Ereignisse
Hier sind einige Optionen, Methoden und Ereignisse, die über das Bootstrap Collapsible JavaScript-Plugin verfügbar sind. Die Details lauten wie folgt:
Optionen
parent:Der Werttyp ist Selector. Der Standardwert ist false. Wenn das übergeordnete Element angezeigt wird, werden alle reduzierbaren Elemente unter dem übergeordneten Element geschlossen.
toggle:Der Wert ist vom Typ Boolean. Der Standardwert ist wahr. Beim Aufruf werden alle reduzierbaren Elemente umgeschaltet.
toggle:Der Wert ist vom Typ Boolean. Der Standardwert ist wahr. Beim Aufruf werden alle reduzierbaren Elemente umgeschaltet.
Methode
.collapse(Optionen): Reduzierbaren Inhalt auslösen. Akzeptiert ein optionales Optionsobjekt.
.collapse('toggle'): Ein reduzierbares Seitenelement anzeigen oder ausblenden.
.collapse('show'): Zeigt ein reduzierbares Seitenelement an.
.collapse(hide): Ein reduzierbares Seitenelement ausblenden.
Veranstaltung
show: Dieses Ereignis wird unmittelbar nach dem Aufruf der Show-Instanzmethode ausgelöst.
angezeigt: Dieses Ereignis wird ausgelöst, wenn das reduzierbare Seitenelement angezeigt wird (und der CSS-Übergangseffekt ausgeführt wurde).
hide: Dieses Ereignis wird unmittelbar nach dem Aufruf der Methode zum Ausblenden der Instanz ausgelöst.
versteckt: Dieses Ereignis wird ausgelöst, wenn das reduzierbare Seitenelement für den Benutzer verborgen ist (und der CSS-Übergangseffekt abgeschlossen ist).
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1392
52
So installieren Sie die DirectPlay-Komponente der alten Windows 10-Version
Dec 28, 2023 pm 03:43 PM
Viele Benutzer stoßen beim Spielen einiger Spiele unter Win10 immer auf Probleme, wie z. B. ein Einfrieren des Bildschirms und unscharfe Bildschirme. Zu diesem Zeitpunkt können wir das Problem lösen, indem wir die Directplay-Funktion aktivieren, und die Bedienungsmethode der Funktion ist ebenfalls sehr einfach. So installieren Sie DirectPlay, die alte Komponente von Win10 1. Geben Sie „Systemsteuerung“ in das Suchfeld ein und öffnen Sie es. 2. Wählen Sie große Symbole als Anzeigemethode. 3. Suchen Sie nach „Programme und Funktionen“. 4. Klicken Sie links, um oder zu aktivieren Win-Funktionen ausschalten 5. Wählen Sie hier die alte Version aus. Aktivieren Sie einfach das Kontrollkästchen
Freigelegte Google Pixel 9 Pro Fold-Telefonhülle: 6,4-Zoll-Außenbildschirm, 8,02-Zoll-Innenbildschirm
Jun 25, 2024 pm 02:35 PM
Laut Nachrichten vom 25. Juni veröffentlichte die Quelle ytechb gestern (24. Juni) einen Blogbeitrag, in dem sie ein Rendering der Google Pixel 9 Pro Fold-Handyhülle teilte, in dem noch einmal das Design der Rückseite dieses Faltbildschirms gezeigt wurde. Laut früheren Nachrichten wird Google im Oktober dieses Jahres die Pixel-9-Serie von Mobiltelefonen herausbringen. Zusätzlich zu den drei Telefonen der Pixel-9-Serie wird auch Pixel Fold in die Pixel-9-Serie aufgenommen und offiziell als Pixel 9 bezeichnet Pro Fold. Die diesmal ausgestellte Telefonhülle stammt vom Zubehörhersteller Torro. Die Online-Shops des Unternehmens in Großbritannien und den USA haben die Produkttelefonhülle gelistet und das Design und die Displaygröße des Telefons bekannt gegeben. Die Seite zeigt eine große Anzahl von Renderings von Pixel 9 Pro Fold-Telefonhüllen
Samsungs 10.000 Yuan teures faltbares Telefon W25 enthüllte: 5-Megapixel-Unterbildschirm-Frontkamera und dünneres Gehäuse
Aug 23, 2024 pm 12:43 PM
Laut Nachrichten vom 23. August steht Samsung kurz vor der Markteinführung eines neuen Falthandys W25, das voraussichtlich Ende September vorgestellt wird. Es wird entsprechende Verbesserungen bei der Frontkamera unter dem Bildschirm und der Gehäusedicke mit sich bringen. Berichten zufolge wird das Samsung W25 mit dem Codenamen Q6A mit einer 5-Megapixel-Unterbildschirmkamera ausgestattet sein, was eine Verbesserung gegenüber der 4-Megapixel-Kamera der Galaxy Z Fold-Serie darstellt. Darüber hinaus werden die Frontkamera mit externem Bildschirm und die Ultraweitwinkelkamera des W25 voraussichtlich 10 bzw. 12 Millionen Pixel groß sein. Vom Design her ist das W25 im zusammengeklappten Zustand etwa 10 mm dick und damit etwa 2 mm dünner als das Standard-Galaxy Z Fold 6. In Bezug auf den Bildschirm verfügt das W25 über einen externen Bildschirm von 6,5 Zoll und einen internen Bildschirm von 8 Zoll, während das Galaxy Z Fold6 über einen externen Bildschirm von 6,3 Zoll und einen internen Bildschirm von 8 Zoll verfügt.
Wie implementiert man eine Kalenderkomponente mit Vue?
Jun 25, 2023 pm 01:28 PM
Vue ist ein sehr beliebtes Front-End-Framework. Es bietet viele Tools und Funktionen wie Komponentisierung, Datenbindung, Ereignisbehandlung usw., die Entwicklern beim Erstellen effizienter, flexibler und einfach zu wartender Webanwendungen helfen können. In diesem Artikel werde ich vorstellen, wie man eine Kalenderkomponente mit Vue implementiert. 1. Anforderungsanalyse Zunächst müssen wir die Anforderungen dieser Kalenderkomponente analysieren. Ein einfacher Kalender sollte über die folgenden Funktionen verfügen: Anzeige der Kalenderseite des aktuellen Monats; Unterstützung des Wechsels zum vorherigen oder nächsten Monat; Unterstützung beim Klicken auf einen bestimmten Tag;
Das Samsung Galaxy Z Flip 6-Modell wurde erstmals enthüllt: schmalere Ränder, Falten sind immer noch vorhanden
Jun 22, 2024 am 03:28 AM
Laut Nachrichten vom 21. Juni haben ausländische Medien kürzlich Modellfotos des Samsung Galaxy Z Flip 6 im Internet veröffentlicht. Aus dem Bild geht hervor, dass die Ränder des Samsung Galaxy Z Flip 6 weiter verengt werden, was bedeutet, dass die Breite des Telefons im zusammengeklappten Zustand verringert werden kann und es außerdem für einen bequemeren Halt und eine bessere Tragbarkeit sorgt . Darüber hinaus ist das Modell des Galaxy ZFlip6 im Vergleich zur Vorgängergeneration ZFlip5 quadratischer und das Kameramodul auf der Rückseite wird voraussichtlich einen neuen Kamerasensor verwenden. Von vorne betrachtet sind die Falten des Telefons jedoch immer noch relativ offensichtlich. Wenn man jedoch bedenkt, dass es sich bei dem durchgesickerten Modell um ein Modelltelefon handelt, kann es einige Unterschiede zum echten Telefon geben, sodass es nur als Referenz dient. Was die Leistungskonfiguration angeht, Galaxy
Das größte Manko von Faltdisplay-Handys: keine Kernanwendungsszenarien
Mar 16, 2024 am 09:04 AM
Was wir heute besprechen, ist nicht, wie ein bestimmtes Produkt aussieht, sondern wir kehren zum Thema „Faltbildschirm“ selbst zurück und untersuchen die „Rationalität“ von Mobiltelefonen mit Faltbildschirm. Werfen wir zunächst einen Blick auf die Marktleistung von Mobiltelefonen mit Faltbildschirm. Laut dem neuesten Datenbericht von IDC wird der Markt für Mobiltelefone mit Faltbildschirm im Jahr 2023 etwa 7,007 Millionen Einheiten ausliefern, was einem Anstieg von 114,5 % gegenüber dem Vorjahr entspricht. Unter anderem wurden auf dem chinesischen Markt für Mobiltelefone mit faltbarem Bildschirm im vierten Quartal 2023 etwa 2,771 Millionen Einheiten ausgeliefert, was einem Anstieg von 149,6 % gegenüber dem Vorjahr entspricht. Die Daten sehen gut aus, und das Wachstum ist ebenfalls sehr stark. Verglichen mit den rund 270 Millionen Smartphone-Lieferungen auf dem chinesischen Markt im Jahr 2023 reichen diese Daten jedoch wirklich nicht aus. Allgemein
IDC schätzt, dass die weltweiten Smartphone-Lieferungen im Jahr 2024 1,2 Milliarden Einheiten betragen werden: 25 Millionen faltbare Bildschirmeinheiten, ein Anstieg von 37 % gegenüber dem Vorjahr.
Feb 24, 2024 pm 02:20 PM
Laut Nachrichten vom 24. Februar hat IDC kürzlich einen Marktforschungsbericht veröffentlicht, in dem prognostiziert wird, dass die weltweiten Smartphone-Lieferungen im Jahr 2024 1,2 Milliarden Einheiten erreichen werden, was einem Anstieg von 2,8 % gegenüber dem Vorjahr entspricht, und bis 2028 ein niedriges einstelliges Wachstum beibehalten wird . IDC geht davon aus, dass die Gesamtlieferungen im Jahr 2024 immer noch unter dem Niveau vor der Pandemie liegen werden, der globale Smartphone-Markt hat jedoch die Talsohle durchschritten und beginnt, einen Aufwärtstrend der Erholung zu zeigen. IDC ist davon überzeugt, dass die beiden Schlüsselfaktoren für die allgemeine Markterholung der Zyklus der Geräteerneuerung und das Nachfragewachstum in den Schwellenmärkten sind. Es gibt auch zwei Hauptantriebskräfte, die davon ausgehen, dass die Auslieferungen von Mobiltelefonen mit Faltbildschirmen im Jahr 2024 25 Millionen erreichen werden, was einem Anstieg von 37 % gegenüber dem Vorjahr entspricht Die Diskussion auf Smartphones löst aus
Möchten Sie mehr über das Falten von Wörtern erfahren?
Mar 19, 2024 pm 07:49 PM
Nachdem Sie den Textinhalt in Word bearbeitet haben, müssen Sie den bearbeiteten Inhalt anzeigen und überprüfen. Wenn es viel Inhalt gibt, ist es unpraktisch, dieses Problem zu lösen. In diesem Fall ist die Wortfaltungsmethode erforderlich. Lassen Sie den Herausgeber das Methoden-Tutorial mit allen meinen Freunden teilen! Öffnen Sie zunächst das Word-Dokument auf Ihrem Computer, geben Sie den erforderlichen Inhalt ein und wählen Sie ihn aus. Klicken Sie dann in der Menüleiste auf die Option „Start“ und wählen Sie dann einen Stil aus, der auf den gerade ausgewählten Textabsatz angewendet werden soll. Sie können sich auf den Teil beziehen, der im Bild unten mit einem roten Kreis markiert ist. 2. Anschließend ändert der ausgewählte Textabsatz seinen Stil und fügt einen kleinen Pfeil hinzu, wie im roten Kreis im Bild unten dargestellt: 3. Klicken Sie auf den kleinen Pfeil, um den zuvor ausgewählten Textabsatz frei zu erweitern oder zu reduzieren, oder klicken Sie direkt mit der rechten Maustaste , aus
