Creați widgeturi cu tab-uri responsabile cu GridTab

Este întotdeauna mai ușor să construiți site-uri folosind instrumente open source în loc să reinventeze roata. Aceste instrumente variază de la biblioteci la pluginuri mai mici, dar puteți găsi o soluție pentru practic orice.

Fenomenalul jQuery GridTab plugin este un exemplu bun. Vă permite să configurați o rețea personalizată, definiți punctele de întrerupere, și creați un widget cu fișiere receptiv care se potriveste oricărui site web.

Puteți adăuga propriile clase CSS sau puteți lucra cu cele existente pentru a crea o funcție de filă care se potrivește designului dvs. Acest plugin acceptă, de asemenea elemente de navigare pentru comenzile următoare / prev și comutarea între file.

Instalarea este o briză și necesită numai jQuery bibliotecă ca o dependență. Odată ce a fost instalat, puteți să preluați GridTab de la npm sau să îl descărcați direct de la GitHub.

Rețineți că acest plugin widget tabel are a stil implicit, deci nu are separată foaie de stil CSS în partea de sus a fișierului plugin JS. Dar, puteți să îmbinați întotdeauna acest CSS în propriul dvs. pentru a reduce cererile HTTP.

Pentru a inițializa pluginul, pur și simplu treceți dimensiunea totală a grilei impreuna cu orice parametru opțional (toate listate pe GitHub).

Iată un simplu script de inițializare:

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

Setările includ selectori personalizați, stiluri receptive, border / padding / color settings, și bineînțeles, a funcția de apel invers.

S-ar putea să fii curios să vezi cum funcționează toate și cum arată în browser-ul tău. Check out “Demonstrații” pentru a vedea a câteva exemple, inclusiv codul sursă brut puteți copia.

Majoritatea oamenilor cred că tab-urile sunt funcții pentru widgeturi de profil mici. in orice caz, site-uri de portofoliu pot folosi de asemenea grile cu caracteristici cu file și pluginul GridTab este cea mai bună resursă pentru a bloca acest efect.

Tot ce trebuie să știți, inclusiv documentația completă, pot fi găsite pe pagina principală GridTab. Aceasta include, de asemenea, o legătură către repo GitHub, astfel încât să puteți răsfoi prin sursă și să începeți personalizarea propriilor grilaje.