Veidojiet atsaucīgus logrīku logrīkus ar GridTab

Vienmēr ir vieglāk izveidot tīmekļa vietnes, izmantojot atvērtā koda rīkus nevis riteņa izgudrošana. Šie rīki ir no bibliotēkām līdz mazākiem spraudņiem, taču jūs varat atrast risinājumu būtībā jebkuram.

Fenomenāls jQuery GridTab spraudnis ir viens labs piemērs. Tas ļauj jums izveidot pielāgotu režģi, definēt pārtraukuma punktus, un izveidojiet atsaucīgu cilnes logrīku kas atbilst jebkurai vietnei.

Jūs varat pievienot savas CSS klases vai strādāt ar esošajām, lai izveidotu cilnes funkciju, kas atbilst jūsu dizainam. Šis spraudnis arī atbalsta navigācijas elementi nākamajām / iepriekšējām kontrolēm un pārslēgšanās starp cilnēm.

Uzstādīšana ir brīze, un tas prasa tikai jQuery bibliotēka kā atkarība. Kad tas ir instalēts, jūs varat paķert GridTab no npm vai lejupielādēt to tieši no GitHub.

Paturiet prātā, ka šajā cilnes logrīka spraudnis ir noklusējuma stils, tā ir atsevišķa CSS stila lapa virs JS spraudņa faila. Taču, lai samazinātu HTTP pieprasījumus, jūs vienmēr varat apvienot šo CSS savā.

Lai iniciētu spraudni, jūs vienkārši iziet kopējais tīkla lielums kopā ar jebkuru izvēles parametru (visi ir uzskaitīti pakalpojumā GitHub).

Šeit ir vienkāršs inicializācijas skripts:

 $ (dokuments). jau (funkcija () $ ('# gridtab-1'.) gridtab (grid: 3);); 

Iestatījumi ietver pielāgoti atlasītāji, atsaucīgi stili, robežu / polsterējumu / krāsu iestatījumi, un, protams, a atzvanīšanas funkcija.

Jūs varētu būt interesanti redzēt, kā tas viss darbojas un kas izskatās jūsu pārlūkprogrammā. Pārbaudiet “Demos” sadaļu, lai aplūkotu a daži piemēri, tostarp izejvielu pirmkods jūs varat kopēt.

Lielākā daļa cilvēku domā par cilnēm kā funkciju mazo profilu logrīkiem. Tomēr, portfeļu tīmekļa vietnes var arī izmantot režģi ar cilnēm un GridTab spraudnis ir labākais resurss šo efektu ieslēgšanai.

Viss, kas jums jāzina, ieskaitot pilnīga dokumentācija, var atrast GridTab galvenajā lapā. Tas ietver arī saiti uz GitHub repo, lai jūs varētu pārlūkot avotu un sākt pielāgot savus atsaucīgos cilnes tīklus.