Erstellen Sie responsive Tabbed-Widgets mit GridTab

Es ist immer einfacher, Websites zu erstellen Open Source-Werkzeuge anstatt das Rad neu zu erfinden. Diese Tools reichen von Bibliotheken bis hin zu kleineren Plugins, aber Sie können für alles eine Lösung finden.

Das Phänomen jQuery GridTab-Plugin ist ein schönes Beispiel. Es erlaubt dir zu Richten Sie ein benutzerdefiniertes Raster ein, Definieren Sie die Haltepunkte, und Erstellen Sie ein responsives Widget mit Registerkarten das passt zu jeder Website.

Sie können Ihre eigenen CSS-Klassen hinzufügen oder mit vorhandenen Klassen arbeiten, um eine Tabulatorfunktion zu erstellen, die zu Ihrem Design passt. Dieses Plugin unterstützt auch Navigationselemente für die nächsten / vorherigen Steuerelemente und zwischen Registerkarten wechseln.

Die Installation ist ein Kinderspiel und erfordert nur die jQuery-Bibliothek als Abhängigkeit. Sobald dies installiert ist, können Sie GridTab von npm herunterladen oder direkt von GitHub herunterladen.

Beachten Sie, dass dieses Widget-Widget mit Registerkarten eine Standardstil, so hat es eine separates CSS-Stylesheet auf der JS-Plugin-Datei. Sie können dieses CSS jedoch immer mit Ihrem eigenen zusammenführen, um HTTP-Anforderungen zu reduzieren.

Um das Plugin zu initialisieren, übergeben Sie einfach das Gesamtgittergröße zusammen mit beliebiger optionaler Parameter (alle auf GitHub aufgeführt).

Hier ist eine einfache Initialisierungsskript:

 $ (document) .ready (function () $ ('# gridtab-1'). gridtab (grid: 3);); 

Einstellungen umfassen benutzerdefinierte Selektoren, responsive Styles, Rand / Füllung / Farbeinstellungen, und natürlich a Rückruffunktion.

Sie könnten neugierig sein, wie das alles funktioniert und wie es in Ihrem Browser aussieht. Besuche die “Demos” Abschnitt zu sehen a einige Beispiele, einschließlich roher Quellcode Sie können kopieren.

Die meisten Benutzer betrachten Registerkarten als Funktionen für Widgets mit kleinen Profilen. jedoch, Portfolio-Websites kann auch Gebrauch machen Raster mit Tabbed-Funktionen und das GridTab-Plugin ist die beste Ressource, um diesen Effekt zu erkennen.

Alles, was Sie wissen müssen, einschließlich vollständige Dokumentation, finden Sie auf der Hauptseite von GridTab. Dazu gehört auch ein Link zum GitHub-Repo, mit dem Sie durch die Quelle blättern und Ihre eigenen responsiven Tab-Raster anpassen können.