Bouw responsieve widgets met tabbladen met GridTab

Het is altijd gemakkelijker om websites te bouwen met open source tools in plaats van het wiel opnieuw uit te vinden. Deze tools variëren van bibliotheken tot kleinere plug-ins, maar u kunt voor vrijwel alles een oplossing vinden.

Het fenomenale jQuery GridTab-plug-in is een goed voorbeeld. Hiermee kunt u een aangepast raster instellen, definieer de breekpunten, en maak een responsieve widget met tabbladen dat past bij elke website.

U kunt uw eigen CSS-klassen toevoegen of met bestaande CSS-klassen werken om een ​​tabbladfunctie te creëren die bij uw ontwerp past. Deze plug-in ondersteunt ook navigatie-elementen voor de volgende / vorige besturingselementen en schakelen tussen tabbladen.

Installatie is een koud kunstje en het vereist alleen de jQuery-bibliotheek als een afhankelijkheid. Zodra dat is geïnstalleerd, kun je GridTab van npm pakken of direct downloaden vanuit GitHub.

Houd er rekening mee dat deze widget met widget met tabbladen een standaard stijl, dus het heeft een afzonderlijke CSS-stylesheet bovenop het JS plugin-bestand. Maar u kunt deze CSS altijd samenvoegen met uw eigen instellingen om HTTP-verzoeken te verminderen.

Om de plug-in te initialiseren, hoeft u alleen de totale rastermaat samen met een optionele parameter (alle vermeld op GitHub).

Hier is een eenvoudig initialisatiescript:

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

Instellingen omvatten aangepaste selectors, responsieve stijlen, grens / opvulling / kleurinstellingen, en natuurlijk, a callback-functie.

U bent misschien benieuwd hoe dit allemaal werkt en hoe het eruit ziet in uw browser. Bekijk de “demos” sectie om een ​​te zien enkele voorbeelden, inclusief onbewerkte broncode je kunt kopiëren.

De meeste mensen beschouwen tabbladen als functies voor widgets met een klein profiel. Echter, portfoliosites kan ook gebruik maken van rasters met tabbladen en de GridTab-plug-in is de beste bron voor het nagelen van dit effect.

Alles wat u moet weten, inclusief volledige documentatie, is te vinden op de hoofdpagina van het tabblad Grid. Dit bevat ook een koppeling naar de GitHub-repo zodat je door de bron kunt bladeren en je eigen responsieve rasters met tabbladen kunt aanpassen.