Z GridTab izdelajte odzivne pripomočke za zavihke

Spletne strani je vedno lažje uporabljati orodja odprte kode namesto da odkrivamo kolo. Ta orodja segajo od knjižnic do manjših vtičnikov, vendar lahko najdete rešitev za vse.

Fenomenalen jQuery vtičnik GridTab je en dober primer. To vam omogoča nastavite omrežje po meri, določite prelomne točke, in ustvarite odzivni pripomoček z zavihki ki ustreza vsem spletnim mestom.

Dodate lahko svoje razrede CSS ali delate z obstoječimi, da ustvarite funkcijo zavihka, ki ustreza vašemu dizajnu. Ta vtičnik podpira tudi navigacijski elementi za kontrolnike naslednji / pred in preklapljanje med zavihki.

Namestitev je prepirljiva in zahteva le jQuery knjižnica kot odvisnost. Ko je nameščen, lahko GridTab vzamete iz npm ali ga prenesete neposredno iz GitHub.

Ne pozabite, da ima vtičnik za gradnike z zavihki a privzeti slog, tako da ima ločeno slogovno datoteko CSS na vrhu datoteke vtičnika JS. Vendar pa lahko ta CSS vedno združite v svoje, da zmanjšate zahteve HTTP.

Če želite inicializirati vtičnik, preprosto prenesete skupna velikost mreže skupaj z neobvezni parameter (vse na seznamu GitHub).

Tukaj je preprosto inicializacijski skript:

 $ (document) .ready (funkcija () $ ('# gridtab-1'). gridtab (grid: 3);); 

Nastavitve vključujejo izbirniki po meri, odzivnih stilov, nastavitev obrobe / obloge / barve, in seveda, a funkcija povratnega klica.

Morda vas zanima, kako to deluje in kako izgleda v vašem brskalniku. Oglejte si “Demos” za prikaz a nekaj primerov, vključno z surova izvorna koda lahko kopirate.

Večina ljudi meni, da so zavihki funkcije za majhne pripomočke profila. Vendar pa, spletne strani portfelja lahko uporablja tudi rešetke s funkcijami z zavihki in plugin GridTab je najboljši vir za zapiranje tega učinka.

Vse, kar morate vedeti, tudi popolno dokumentacijo, najdete na glavni strani GridTab. To vključuje tudi povezavo do repozicije GitHub, tako da lahko brskate po viru in začnete prilagajati lastne mreže z odzivnimi karticami.