Bygg Responsive Tabbed Widgets med GridTab

Det er alltid enklere å bygge nettsteder ved hjelp av open source-verktøy, i stedet for å gjenoppfinne hjulet. Disse verktøyene spenner fra bibliotek til mindre plugins, men du kan finne en løsning for i utgangspunktet alt.

Det fenomenale jQuery GridTab-pluginet er et fint eksempel. Det lar deg sette opp et egendefinert grid, definere breakpoints og lage en responsiv tabbed widget som passer til et nettsted.

Du kan legge til egne CSS-klasser eller arbeide med eksisterende for å lage en fanefunksjon som passer til designet. Denne plugin støtter også navigasjonselementer for neste / forrige 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 dette plugin-modulen for plugget har en standardstil, så den har et eget CSS-stilark oven på JS-pluginfilen. Men du kan alltid fusjonere dette CSS til din egen for å redusere HTTP-forespørsler.

For å initialisere pluginet, passerer du bare den totale gridstørrelsen sammen med eventuelle valgfrie parametere (alle oppført på GitHub).

Her er et enkelt initialiseringsskript :

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

Innstillingene inkluderer egendefinerte valgmuligheter, responsive stiler, grense / polstring / fargeinnstillinger, og selvfølgelig en tilbakeringingsfunksjon .

Du kan være nysgjerrig på å se hvordan alt dette fungerer og hvordan det ser ut i nettleseren din. Se avsnittet "Demoer" for å se noen eksempler, inkludert rå kildekode du kan kopiere.

De fleste tror på faner som funksjoner for småprofil widgets. Porteføljesider kan imidlertid også benytte seg av grensesnitt med flippingsfunksjoner, og GridTab-plugin er den beste ressursen for å spikere denne effekten.

Alt du trenger å vite, inkludert full dokumentasjon, finnes 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.