Bygg Responsive Tabbed Widgets med GridTab

Det är alltid lättare att bygga webbplatser med öppna källverktyg snarare än att uppfinna hjulet. Dessa verktyg varierar från bibliotek till mindre plugins men du kan hitta en lösning för i stort sett allt.

Den fenomenala jQuery GridTab-plugin är ett bra exempel. Det tillåter dig att skapa ett anpassat rutnät, definiera brytpunkterna, och skapa en responsiv tabbed widget som passar alla webbplatser.

Du kan lägga till egna CSS-klasser eller arbeta med befintliga för att skapa en flikfunktion som passar din design. Denna plugin stöder också navigationselement för nästa / föregående kontroller och växlar mellan flikar.

Installation är en vind och det kräver bara jQuery-biblioteket som ett beroende. När det är installerat kan du ta GridTab från npm eller hämta den direkt från GitHub.

Tänk på att det här flikprogrammet för widgetar har ett standardstil, så det har en separat CSS-stilark ovanpå JS-pluginfilen. Men du kan alltid sammanfoga denna CSS till din egen för att minska HTTP-förfrågningar.

För att initiera pluginet passerar du helt enkelt total gallerstorlek tillsammans med någon valfri parameter (alla listade på GitHub).

Här är en enkel initieringsskript:

 $ (dokument) .ready (funktion () $ ('# gridtab-1') .gridtab (grid: 3);); 

Inställningarna inkluderar anpassade selektorer, responsiva stilar, gränser / vadderar / färginställningar, och naturligtvis a återuppringningsfunktion.

Du kanske är nyfiken på att se hur allting fungerar och hur det ser ut i din webbläsare. Kolla in “demos” avsnitt för att se en några exempel, Inklusive rå källkod du kan kopiera.

De flesta tycker om flikar som funktioner för småprofil widgets. dock, portföljwebbplatser kan också utnyttja galler med flikfunktioner och GridTab-plugin är den bästa resursen för spikning av denna effekt.

Allt du behöver veta, inklusive fullständig dokumentation, finns på huvudsidan för GridTab. Detta inkluderar också en länk till GitHub repo så att du kan bläddra igenom källan och börja anpassa dina egna lyhörda flikar.