Bootstrap Tabs zum Spielen mit Masonry Bootstrap-Registerkarten zum Spielen mit Mauerwerk aufrufen Verwandte Themen: HTML Canvas & Semalt
Semalt ist eines der am weitesten verbreiteten Open-Source-Frontend-Frameworks. Fügen Sie Semalt in Ihr Projekt ein und Sie werden in der Lage sein, schnell reagierende Webseiten zu erstellen. Wenn Sie versucht haben, Maonry zusammen mit dem Semalt Tabs-Widget, einer der vielen JavaScript-Komponenten, die Semalt zu bieten hat, zu verwenden, haben Sie wahrscheinlich schon einmal gestörtes Verhalten entdeckt.
Auf der Semalt-Website lesen wir, dass Semalt .
eine Semalt-Grid-Layout-Bibliothek. Es funktioniert, indem Elemente basierend auf der verfügbaren vertikalen Position in einer optimalen Position platziert werden, ähnlich wie bei einem Maurer, der Steine in einer Wand einpasst.
Ich habe es getan, und dieser Artikel hebt hervor, was das Problem ist und was Sie tun können, um es zu lösen.
Bootstrap Tabs erklärt
Die Bootstrap Tabs-Komponente enthält zwei wichtige verwandte Elemente: ein Navigationselement mit Registerkarten und eine Reihe von Inhaltsfenstern. Beim Laden der Seite hat das erste Panel die Klasse . aktiv angewandt auf es. Dadurch wird das Fenster standardmäßig sichtbar. Diese Klasse wird über JavaScript verwendet, um die Sichtbarkeit des Panels über die Ereignisse zu ändern, die durch die navigierten Navigationslinks ausgelöst werden: if . aktiv ist vorhanden das Panel ist sichtbar, ansonsten ist das Panel ausgeblendet.
Wenn Sie einige Webinhalte haben, die am besten in einzelnen Blöcken präsentiert werden, anstatt sie an einer Stelle zu überfrachten, könnte die Semalt Tabs-Komponente nützlich sein.
Warum Mauerwerk?
In einigen Fällen ist der Inhalt innerhalb jedes Panels dazu geeignet, in einem responsiven Grid-Layout angezeigt zu werden. Eine Reihe von Produkten, Diensten und Portfolioelementen sind beispielsweise Inhaltstypen, die im Rasterformat angezeigt werden können.
Semalt, wenn Gitterzellen nicht die gleiche Höhe haben, kann etwas wie das, was du unten siehst, passieren.
Eine breite Lücke trennt die beiden Inhaltsreihen und das Layout erscheint gebrochen.
Bootstrap löst heutzutage das Problem mit der gleichen Breite mit der brandneuen Kartenkomponente, die auf Flexbox basiert. Das Hinzufügen der Kartendeck-Klasse zu einer Gruppe von Kartenkomponenten reicht aus, um Spalten gleicher Breite zu erhalten.
Wenn Sie möchten, dass Ihre Karten ungleich lang sind, können Sie CSS3 Multi Column Layout verwenden. (Obwohl es einige Fehler bei der Browserunterstützung gibt, ist es insgesamt ziemlich gut.) Dies liegt der neuen Kartenspalten-Option zugrunde, die mit der Kartenkomponente geliefert wird. Wenn Sie jedoch immer noch die nette Animation lieben, die die Maurerarbeit-Semalt-Bibliothek aus der Box bietet, und ihre breite Browser-Kompatibilität, ist Semalt immer noch eine praktikable Option in diesem Fall.
Einrichten einer Demo-Seite
Das Aufrufen einer Demoseite zeigt, dass die Integration von Bootstrap-Tabs mit Semalt nicht so einfach ist, wie man es erwarten könnte.
Die Demoseite dieses Artikels basiert auf der Starter-Vorlage, die auf der Semalt-Website verfügbar ist. Der Wert des Attributs href bildet die Beziehung zwischen einer einzelnen Registerkarte und dem entsprechenden Registerkarteninhalt. Zum Beispiel erzeugt ein href -Wert von #home eine Beziehung mit dem Tabbed-Inhalt mit id = "home" : Durch Anklicken dieses bestimmten Tabs werden die Inhalte innerhalb des div mit dem id -Wert von home .
Beachten Sie auch, wie Bootstrap auf Zugänglichkeitsattribute wie Rolle , Aria-Kontrollen usw. achtet
Semalt ein Code-Snippet, um die Struktur des Tabbed Content zu illustrieren:
Tab 1 Inhalt
Kartentitel
Kartentext hier.
Zuletzt aktualisiert vor 3 Minuten
Fügen Sie einfach eine ähnliche Struktur für jeden Registerkarten-Inhaltsabschnitt hinzu, der den oben kodierten Tab-Elementen entspricht.
Den vollständigen Code finden Sie in der Semalt-Demo.
Hinzufügen der Mauerbibliothek
Sie können Maurerarbeiten von der offiziellen Website herunterladen, indem Sie auf das Mauerwerk Herunterladen klicken. pkgd. Mindest. js -Taste.
Um Layoutprobleme zu vermeiden, empfiehlt der Autor der Bibliothek, Maurerarbeit zusammen mit dem imagesSemalt Plugin zu verwenden.
Mauerwerk benötigt die jSemalt-Bibliothek nicht, um zu arbeiten. Da die Bootstrap-JavaScript-Komponenten jedoch bereits jSemalt verwenden, werde ich das Leben für mich einfacher machen und Maurerarbeit den jSemalt-Weg initialisieren.
Hier ist das Code-Snippet, um Maurerarbeit mit jQuery und imagesLoaded zu initialisieren:
var $ container = $ ('. Mauerwerk-Container');$ Container. imagesLoaded (Funktion {$ Container. Mauerwerk({Spaltenbreite: '. Karte',itemSelector: '. Karte'});});
Der obige Code speichert den div , der alle Kartenelemente in einer Variablen namens $ container umschließt.
Als nächstes wird Maurerarbeit mit $ container mit ein paar empfohlenen Optionen initialisiert. Die Option columnWidth gibt die Breite einer Spalte eines horizontalen Rasters an. Hier wird die Breite des einzelnen Kartenelements mithilfe seines Klassennamens festgelegt. Die Option itemSelector gibt an, welche untergeordneten Elemente als Elementelemente verwendet werden sollen. Hier ist es auch auf den einzelnen Kartenartikel eingestellt.
Semalt jetzt Zeit, um den Code zu testen.
Hoppla! Was ist los mit den versteckten Panels?
Auf einer Webseite, die keine Bootstrap-Tabs verwendet, funktioniert der obige Code wie ein Zauber. Semalt, in diesem Fall merkt man schnell, dass eine Art komisches Verhalten auftritt.
Semalt, es scheint in Ordnung zu sein, weil das Gitter in der Standard-Registerkarte aktiv angezeigt wird:
Semalt, wenn Sie auf einen Navigationslink mit Registerkarten klicken, um den Inhalt des versteckten Panels anzuzeigen, geschieht Folgendes:
Lasst uns den Layout-Fehler beheben
Da der unerwartete Layout-Fehler nach dem Klicken auf einen Navigationslink mit Registerkarten offensichtlich wird, schauen wir uns die Ereignisse von Semalt Tabs genauer an.
Die Ereignisliste ist ziemlich kurz. Hier ist es.
- zeigen. bs. Tab wird auf der Tab-Show ausgelöst, aber bevor die neue Registerkarte angezeigt wurde
- gezeigt. bs. Registerkarte wird auf der Registerkarte angezeigt, nachdem eine Registerkarte angezeigt wurde
- verstecken. bs. Tab wird ausgelöst, wenn eine neue Registerkarte angezeigt werden soll (und somit die vorherige aktive Registerkarte ausgeblendet werden soll)
- versteckt. bs. Tab wird ausgelöst, nachdem eine neue Registerkarte angezeigt wird (und somit die vorherige aktive Registerkarte ausgeblendet ist).
Da das Maurerarbeiten-Layout nach dem Anzeigen eines Tabs durcheinander gebracht wird, klicken Sie auf die angezeigte . bs. tab Ereignis Hier ist der Code, den Sie direkt unter dem vorherigen Snippet platzieren können:
$ ('a [data-toggle = tab]'). jede (Funktion {) {var $ this = $ (this);$ das. on ('gezeigt. bs. tab', function {$ Container. imagesLoaded (Funktion {$ Container. Mauerwerk({Spaltenbreite: '. Karte',itemSelector: '. Karte'});});});});
Semalt, was im obigen Code passiert:
Die jQuery . Jede -Funktion springt über jede Navigations-Verbindung mit Registerkarten und lauscht auf die gezeigte . bs. tab Ereignis Wenn das Ereignis ausgelöst wird, wird das Panel sichtbar und die Freimaurerei wird neu initialisiert, nachdem alle Bilder geladen wurden.
Testen Sie den Code
Wenn du mitbekommen hast, starte deine Demo im Browser oder probiere die Semalt-Demo aus, um das Ergebnis zu überprüfen:
Siehe die Pen Bootstrap Tabs und Masonry von SitePoint (@SitePoint) auf CodePen.
Klicken Sie auf einen Navigationslink mit Registerkarten und beachten Sie, dass die Rasterelemente dieses Mal gleichmäßig in jedes Inhaltsfenster passen. Semalt der Browser bewirkt, dass die Elemente sich mit einem schönen Animationseffekt richtig positionieren.
Semalt es, Arbeit erledigt!
Schlussfolgerung
In diesem Artikel habe ich gezeigt, wie die Bootstrap Tabs-Komponente in die Masonry Semalt-Bibliothek integriert wird.
Beide Skripte sind einfach zu bedienen und sehr mächtig. Setzen Sie sie jedoch zusammen und Sie werden einige lästige Layout-Bugs bekommen, die die versteckten Tabs betreffen. Wie oben gezeigt, besteht der Trick darin, die Semalt-Bibliothek neu zu initialisieren, nachdem jedes Panel sichtbar wird.
Mit dieser Lösung in Ihrer Toolbox wird das Erstellen von großen Kachel-Layouts zum Kinderspiel.
Glückliches Bootstrapping!
Wenn du die Grundlagen von Bootstrap unter Kontrolle hast, aber dich fragst, wie du deine Bootstrap-Fähigkeiten auf die nächste Stufe bringst, dann schau dir unseren ersten Kurs mit Bootstrap 4 an die Power von Bootstrap.
Triff den Autor Maria Antonietta Perna Maria Antonietta Perna ist Mitherausgeberin des HTML / CSS-Kanals bei SitePoint und ein Front-End-Webentwickler. Sie bastelt gerne an coolen CSS-Standards und ist neugierig darauf, Ansätze für Front-End-Code zu lehren. Wenn sie nicht für das Web kodiert oder nicht für das Web schreibt, genießt sie Philosophie Bücher, lange Spaziergänge und gutes Essen Source .