Crea widget a scheda reattivi con GridTab

È sempre più facile creare siti Web utilizzando strumenti open source piuttosto che reinventare la ruota. Questi strumenti vanno dalle librerie ai plugin più piccoli ma puoi trovare una soluzione praticamente per qualsiasi cosa.

Il fenomenale plugin jQuery GridTab è un ottimo esempio. Ti consente di impostare una griglia personalizzata, definire i punti di interruzione e creare un widget a schede reattivo adatto a qualsiasi sito web.

Puoi aggiungere le tue lezioni CSS o lavorare con quelle esistenti per creare una funzionalità di tabulazione che si adatti al tuo design. Questo plugin supporta anche elementi di navigazione per i controlli next / prev e per passare da una scheda all'altra .

L'installazione è un gioco da ragazzi e richiede solo la libreria jQuery come dipendenza . Una volta installato, puoi afferrare GridTab da npm o scaricarlo direttamente da GitHub.

Tieni presente che questo plugin per widget a schede ha uno stile predefinito, quindi ha un foglio di stile CSS separato sopra al file di plug-in JS. Ma puoi sempre unire questo CSS al tuo per ridurre le richieste HTTP.

Per inizializzare il plugin, devi semplicemente passare la dimensione totale della griglia insieme a qualsiasi parametro opzionale (tutti elencati su GitHub).

Ecco un semplice script di inizializzazione :

 $ (document) .ready (function () {$ ('# gridtab-1'). gridtab ({grid: 3});}); 

Le impostazioni includono selettori personalizzati, stili reattivi, impostazioni di bordo / padding / colore e, naturalmente, una funzione di callback .

Potresti essere curioso di vedere come funziona tutto questo e come appare nel tuo browser. Controlla la sezione "Demo" per vedere alcuni esempi, incluso il codice sorgente raw che puoi copiare.

La maggior parte delle persone pensa alle schede come funzioni per i widget di piccolo profilo. Tuttavia, i siti Web di portfolio possono anche utilizzare le griglie con funzionalità a schede e il plug-in GridTab è la migliore risorsa per inchiodare questo effetto.

Tutto quello che devi sapere, compresa la documentazione completa, può essere trovato sulla pagina principale di GridTab. Questo include anche un collegamento al repository GitHub in modo da poter navigare attraverso l'origine e iniziare a personalizzare le proprie griglie a schede reattive.