Izradite prilagodljive widgete s karticama s GridTabom

Uvijek je lakše graditi web-lokacije pomoću alati otvorenog koda radije nego da iznova otkrivaju točak. Ovi alati se kreću od knjižnica do manjih dodataka, ali možete pronaći rješenje za sve.

Fenomenalan jQuery GridTab dodatak je jedan dobar primjer. To vam omogućuje postavite prilagođenu mrežu, definirati prijelomne točke, i stvorite odgovarajući widget s karticama koja odgovara bilo kojoj web-lokaciji.

Možete dodati vlastite CSS klase ili raditi s postojećim kako biste stvorili značajku kartice koja odgovara vašem dizajnu. Ovaj dodatak također podržava navigacijski elementi za naredne / prethodne kontrole i prebacivanje između kartica.

Instalacija je povjetarac i zahtijeva samo jQuery knjižnica kao ovisnost. Nakon što je instaliran, možete preuzeti GridTab od npm ili ga preuzeti izravno iz GitHub.

Imajte na umu da dodatak widgeta s karticama ima zadani stil, tako da ima zasebna CSS stilova na vrhu datoteke dodatka JS. No, uvijek možete spojiti ovaj CSS u svoje kako biste smanjili HTTP zahtjeve.

Za inicijalizaciju dodatka, jednostavno proslijedite ukupna veličina mreže zajedno s bilo koji dodatni parametar (sve navedeno na GitHubu).

Evo jednostavnog skriptu za inicijalizaciju:

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

Postavke uključuju prilagođeni selektori, odgovarajući stilovi, granica / padding / postavke boje, i naravno, a povratni poziv.

Možda vas zanima kako sve to funkcionira i kako izgleda u vašem pregledniku. Provjerite “demos” kako biste vidjeli a nekoliko primjera, uključujući izvorni izvorni kod možete kopirati.

Većina ljudi kartice smatra značajkama za male widgete profila. Međutim, web stranice portfelja također mogu koristiti rešetke s značajkama s karticama i GridTab dodatak je najbolji izvor za zabijanje ovog efekta.

Sve što trebate znati, uključujući punu dokumentaciju, možete pronaći na glavnoj GridTab stranici. To uključuje i vezu na GitHub repo tako da možete pregledavati izvor i početi prilagođavati vlastite mreže s karticama.