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 bell'esempio Ti permette di impostare una griglia personalizzata, definire i punti di interruzione, e creare un widget a schede reattivo che si adatta 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 passare da una scheda all'altra.

L'installazione è un gioco da ragazzi e richiede solo il 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 un stile predefinito, quindi ha un foglio di stile CSS separato in cima al file di plugin JS. Ma puoi sempre unire questo CSS al tuo per ridurre le richieste HTTP.

Per inizializzare il plugin, devi semplicemente passare il dimensione della griglia totale 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, a funzione di callback.

Potresti essere curioso di vedere come funziona tutto questo e come appare nel tuo browser. Guarda il “Demos” sezione per vedere a alcuni esempi, Compreso codice sorgente grezzo puoi copiare.

La maggior parte delle persone pensa alle schede come funzioni per i widget di piccolo profilo. però, siti web di portfolio può anche fare uso di griglie con funzioni a schede e il plugin GridTab è la migliore risorsa per inchiodare questo effetto.

Tutto ciò che devi sapere, incluso 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.