Byg Responsive Tabbed Widgets med GridTab
Det er altid nemmere at opbygge websites ved hjælp af open source værktøjer snarere end at genopfinde hjulet. Disse værktøjer spænder fra biblioteker til mindre plugins, men du kan finde en løsning for stort set noget.
Det fænomenale jQuery GridTab plugin er et godt eksempel. Det giver dig mulighed for oprette et brugerdefineret net, definere breakpoints, og Opret en lydhør flipperet widget der passer til enhver hjemmeside.
Du kan tilføje dine egne CSS-klasser eller arbejde med eksisterende for at oprette en fanefunktion, der passer til dit design. Dette plugin understøtter også navigationselementer til næste / tidligere kontroller og skifter mellem faner.
Installation er en brise, og det kræver kun jQuery-biblioteket som en afhængighed. Når det er installeret, kan du fange GridTab fra npm eller downloade det direkte fra GitHub.
Husk på, at denne tabbed widget plugin har a standard stil, så det har en separat CSS stilark oven på JS-pluginfilen. Men du kan altid fusionere dette CSS til din egen for at reducere HTTP-anmodninger.
For at initialisere pluginet, passerer du simpelthen total gitter størrelse sammen med enhver valgfri parameter (alle opført på GitHub).
Her er en enkel initialisering script:
$ (dokument) .ready (funktion () $ ('# gridtab-1'). gridtab (grid: 3);); Indstillinger inkluderer brugerdefinerede selektorer, lydhør stilarter, grænse / polstring / farveindstillinger, og selvfølgelig a tilbagekaldsfunktion.
Du kan være nysgerrig efter at se, hvordan alt dette virker, og hvordan det ser ud i din browser. Tjek den “Demoer” afsnit for at se en få eksempler, inklusive rå kildekode Du kan kopiere.
De fleste mennesker tænker på faner som funktioner til småprofil widgets. Imidlertid, porteføljesider kan også gøre brug af grids med tabbed funktioner og GridTab plugin er den bedste ressource til at spikere denne effekt.
Alt du behøver at vide, herunder fuld dokumentation, kan findes på den vigtigste GridTab side. Dette inkluderer også et link til GitHub repo, så du kan gennemse kilden og begynde at tilpasse dine egne reagerende faneblade.
