Vytvorte Responsive Widgets Tabbed s GridTab

Je vždy jednoduchšie vytvárať webové stránky pomocou open source nástroje skôr než objavovať koleso. Tieto nástroje sa pohybujú od knižníc po menšie zásuvné moduly, ale môžete nájsť riešenie pre prakticky čokoľvek.

Fenomenálny doplnok jQuery GridTab je jedným z dobrých príkladov. Umožňuje to nastaviť vlastnú mriežku, definujte body zlomu, a vytvorte prispôsobivú grafickú kartu ktorá vyhovuje ľubovoľnej webovej stránke.

Môžete pridať svoje vlastné triedy CSS alebo pracovať s existujúcimi triedami na vytvorenie funkcie karty, ktorá vyhovuje vášmu návrhu. Tento doplnok tiež podporuje navigačné prvky pre ovládacie prvky next / prev a prepínanie medzi záložkami.

Inštalácia je vánok a vyžaduje len knižnicu jQuery ako závislosť. Akonáhle je to nainštalované, môžete chytiť GridTab z npm alebo stiahnuť priamo z GitHub.

Majte na pamäti, že tento doplnok miniaplikácie s kartami má a predvolený štýl, tak to má samostatný štýl šablóny CSS na začiatok súboru JS plugin. Ale môžete vždy zlúčiť tento CSS do svojho vlastného, ​​aby ste znížili požiadavky HTTP.

Ak chcete inicializovať doplnok, jednoducho prejdite celková veľkosť mriežky spolu s akýkoľvek voliteľný parameter (všetky uvedené na GitHub).

Tu je jednoduchý inicializačný skript:

 $ (dokument) .ready (funkcia () $ ('# gridtab-1') gridtab (mriežka: 3); 

Nastavenia zahŕňajú vlastné výbery, citlivé štýly, okraj / polstrovanie / nastavenia farieb, a samozrejme a funkcia spätného volania.

Možno vás zaujíma, ako to všetko funguje a ako vyzerá vo vašom prehliadači. Pozrite sa na stránku “ukážky” pre zobrazenie sekcie niekoľko príkladov, počítajúc do toho zdrojový kód môžete kopírovať.

Väčšina ľudí si myslí, že karty sú funkciami pre malé profilové miniaplikácie. však, portfóliové webové stránky môžu tiež využiť mriežky s kartami a doplnok GridTab je najlepším zdrojom na zablokovanie tohto efektu.

Všetko, čo potrebujete vedieť, vrátane kompletnú dokumentáciu, nájdete na hlavnej stránke GridTab. To tiež zahŕňa odkaz na repo GitHub, aby ste mohli prechádzať zdrojom a začať prispôsobovať svoje vlastné odpovedajúce tabuľkové mriežky.