Ehita GridTabiga vastukaalulised vidinad

Veebisaite on alati lihtsam ehitada avatud lähtekoodiga tööriistad selle asemel, et ratast leiutada. Need tööriistad ulatuvad raamatukogudest väiksematesse pluginatesse, kuid võite leida lahenduse põhiliselt midagi.

Fenomenaalne jQuery GridTab plugin on üks hea näide. See võimaldab teil luua kohandatud võrk, määratleda murdepunktid, ja luua reageeriva vahekaardi vidin mis sobib igale veebisaidile.

Saate lisada oma CSS-klassid või töötada olemasolevatega, et luua oma disainile sobiv vahekaardi funktsioon. See plugin toetab ka navigatsioonielemendid järgmise / eelmise kontrolli jaoks ja vahekaartide vahel.

Paigaldus on imelihtne ja see nõuab ainult jQuery raamatukogu sõltuvuseks. Kui see on installitud, saate GridTabi kätte npm-st või laadida otse GitHubist.

Pidage meeles, et selle vahekaardi vidina pluginal on a vaikimisi stiilis, nii et tal on a eraldi CSS-laaditabel JS-i pluginafaili peal. Kuid HTTP-päringute vähendamiseks saate selle CSS-i alati omaette ühendada.

Pistikprogrammi initsialiseerimiseks liigute lihtsalt kogu võrgu suurus koos mis tahes valikuline parameeter (kõik loetletud GitHubis).

Siin on lihtne käivitamise skript:

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

Seaded sisaldavad kohandatud valijad, tundlikud stiilid, piiri- / polsterdus- / värviseaded, ja muidugi a tagasihelistamise funktsioon.

Sa võid olla uudishimulik, kuidas see kõik toimib ja milline on teie brauseris. Kontrollige “Demod” jagu, et näha a mõned näited, kaasa arvatud toores lähtekood saate kopeerida.

Enamik inimesi mõtleb vahekaartidele väikeste profiilide vidinate funktsioonidena. Kuid, portfelli veebilehed saab ka kasutada võrgud, millel on tabeldatud funktsioonid ja GridTabi plugin on selle efekti naelmiseks parim ressurss.

Kõik, mida pead teadma, sealhulgas täielik dokumentatsioon, leiad GridTabi peamiselt lehelt. See hõlmab ka linki GitHub repole, et saaksite allikat läbi vaadata ja alustada oma reageerivate vahekaartide kohandamist.