Bygg Responsive Tabbed Widgets med GridTab

Det er alltid enklere å bygge nettsteder ved hjelp av åpen kildekode verktøy heller enn å gjenoppfinne hjulet. Disse verktøyene spenner fra bibliotek til mindre plugins, men du kan finne en løsning for stort sett alt.

Den fenomenale jQuery GridTab plugin er et godt eksempel. Det tillater deg å sett opp et tilpasset rutenett, definere breakpoints, og opprett en responsiv tabbed widget som passer til ethvert nettsted.

Du kan legge til egne CSS-klasser eller arbeide med eksisterende for å lage en fanefunksjon som passer til ditt design. Denne plugin støtter også navigasjonselementer for neste / tidligere kontroller og bytter mellom faner.

Installasjon er en bris, og det krever bare jQuery-biblioteket som en avhengighet. Når det er installert, kan du hente GridTab fra npm eller laste den direkte fra GitHub.

Husk at denne tabbed widget-plugin har en standard stil, så det har a skille CSS stilark på toppen av JS-pluginfilen. Men du kan alltid fusjonere dette CSS til din egen for å redusere HTTP-forespørsler.

For å initialisere pluginet, passerer du bare total gridstørrelse sammen med noen valgfri parameter (alle oppført på GitHub).

Her er en enkel initialiseringsskript:

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

Innstillingene inkluderer tilpassede selektorer, responsive stiler, grense / polstring / fargeinnstillinger, og selvfølgelig a tilbakeringingsfunksjon.

Du kan være nysgjerrig på å se hvordan alt dette fungerer og hvordan det ser ut i nettleseren din. Sjekk ut “Demoer” avsnitt for å se en få eksempler, gjelder også rå kildekode du kan kopiere.

De fleste tenker på faner som funksjoner for småprofil widgets. derimot, portefølje nettsteder kan også gjøre bruk av grids med tabbed funksjoner og GridTab-plugin er den beste ressursen for å spikere denne effekten.

Alt du trenger å vite, inkludert full dokumentasjon, kan bli funnet på hovedgridTab-siden. Dette inkluderer også en kobling til GitHub repo, slik at du kan bla gjennom kilden og begynne å tilpasse dine egne responsive tabbedrister.