Al giorno d'oggi la gestione dei layout attraverso il CSS è diventato uno dei problemi più importanti da affrontare per un Web Designer. Infatti, progettare layout complessi e flessibili che siano compatibili anche con i tablet, non è assolutamente facile! Per superare questo problema, vi propongo sei semplici plugin jQuery che vi permetteranno di manipolare e sviluppare layout velocemente e, sopratutto, di ottenere risultati cross-browser.
1. Columnizer
Questo plugin converte automaticamente il contenuto della vostra pagina in un formato simile a quello di un giornale. Vi basterà definire la larghezza delle colonne o, in alternativa, un numero statico di colonne flessibili e il gioco è fatto. L'unica accortezza da adottare è inserire le classi CSS utilizzate da Columnizer prima del vostro foglio di stile personale, in modo da evitare conflitti. Potete scaricare questo plugin dal sito ufficiale: http://welcome.totheinter.net/columnizer-jquery-plugin/
2. UI Layout
Questo plugin è ispirato a extJS border-layout, e ricrea le stesse funzionalità attraverso il framework jQuery. Attraverso la semplice ed intuitiva interfaccia utente, il plugin riesce a creare qualsiasi layout si desideri, dalle semplici barre laterali alle disposizioni più complesse comprensive di menù, barre di stato, sotto moduli e integrazione di altri widget jQuery. UI Layout è l'applicazione più sofisticata di questo genere che possiate trovare in rete: completa, priva di limitazioni e bug. Scaricatela subito attraverso questo link: http://layout.jquery-dev.net/
3. CSS-Template Layout
Questo script analizza l'insieme delle regole CSS e le visualizza impaginate in un layout. Le opzioni includono la possibilità di selezionare il codice da analizzare, così come utilizzare un prefisso opzionale per alcune delle regole. Trovate le istruzioni per l'installazione e tanti esempi ben illustrati a questo indirizzo: http://code.google.com/p/css-template-layout/
Questo plugin è capace di disporre gli elementi HTML in quatto differenti layout attraverso l'utilizzo di altrettanti differenti algoritmi. Il primo definisce i componenti in cinque differenti regioni statiche, il secondo dispone gli elementi in una griglia definita dall'utente, il terzo si attiene sempre ad una griglia ma, questa volta, con dimensioni delle colonne e delle righe flessibili. Infine, l'ultimo algoritmo, dispone i div in orizzontale che traboccano in nuove righe solamente in mancanza di spazio. Scaricatelo e testatelo da qui: http://www.bramstein.com/projects/jlayout/jquery-plugin.html
4. jLayout
Questo plugin è capace di disporre gli elementi HTML in quatto differenti layout attraverso l'utilizzo di altrettanti differenti algoritmi. Il primo definisce i componenti in cinque differenti regioni statiche, il secondo dispone gli elementi in una griglia definita dall'utente, il terzo si attiene sempre ad una griglia ma, questa volta, con dimensioni delle colonne e delle righe flessibili. Infine, l'ultimo algoritmo, dispone i div in orizzontale che traboccano in nuove righe solamente in mancanza di spazio. Scaricatelo e testatelo da qui: http://www.bramstein.com/projects/jlayout/jquery-plugin.html
5. EqualHeights
Creare caselle di altezza uguale a prescindere dai contenuti può essere un'operazione noiosa da effettuare con i CSS. Questo plugin permettere di soddisfare questa esigenza chiamando una singola e semplice funzione. Scopri come funziona e come utilizzarlo seguendo questo link: http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
6. Masonry
Masonry organizza gli elementi i modo inverso a quello consueto: invece di farli fluttuare prima in orizzontale e poi in verticale, riesce a creare colonne verticali che traboccano all'occorrenza in verticale. Il plugin è completamente gestito attraverso regole CSS ed utilizza funzioni come outerWidth() e innerWidth() per calcolare i margin e i padding tra gli elementi. Puoi trovarlo qui: http://masonry.desandro.com/
0 commenti:
Posta un commento