torna all'articolo

CSS3 e jQuery multi-column module

The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. And, of course, it’s easy to use! The W3C multi-column module is a CSS level-three working draft, proposed by the W3C to extend the current CSS box model. The module’s intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced. As a web designer, you can arrange a text so it flows into several well-balanced columns. Or at least you can try. But as you know, the web is not a medium that provides you absolute control over the final display of information. Your nicely crafted markup may turn out badly if your visitors, for instance, use a different font size or turn images off. Similarly, when you switch from static HTML pages to database-driven content, you lose whatever small ability you had to structure your text. Your markup, accordingly, needs to accommodate content of unknown size.

Documentazione

Opzione Cosa fa
width Indica la larghezza di massima delle colonne, e Columnizer ne creerà tante quante possono essere contenute nell'elemento contenitore.
height Questa opzione può essere utilizzata solo in combinazione con l'opzione larghezza. Quando sono impostate sia la larghezza e l'altezza, le colonne continueranno ad essere costruite fino a riempire tutto il contenuto. Questo è utile per scorrere le colonne in orizzontale.
columns è una alternativa alla opzione larghezza. Imposta un numero fisso di colonne, a prescindere dal widget.
target Indica un selettore CSS opzionale: può essere usato per determinare dove il contenuto a colonne dovrebbe essere posto.
doneFunc Indica una funzione che viene richiamata quando sono state create tutte le colonne.
ignoreImageLoading
true per impostazione predefinita. Se impostato su false, Columnizer tenterà di attendere il caricamento delle le immagini nei contenuti prima di creare le colonne.
float predefinito è left. Cambiare in right per le lingue che vanno lette da destra verso sinistra.
lastNeverTallest
false per impostazione predefinita. Impostare a true per assicurarsi che l'ultima colonna non sia la più alta.
buildOnce se buildOnce è falso, il contenuto sarà diviso in colonne ogni volta che la finestra viene ridimensionata. Se buildOnce è true, il contenuto sarà diviso in colonne solo una volta.
overflow Se questa opzione viene utilizzata, viene impostata altezza statica sul contenuto diviso in colonne, e qualsiasi contenuto che non rientra nell'altezza viene messo all'interno di elemento con $ (id) specificato .
height (Obbligatorio): indica l'altezza statica per il contenuto diviso in colonne
id (Obbligatorio): Indica l'ID dell'elemento dove mettere il resto del contenuto
doneFunc (Opzionale): imposta la funzione da chiamare dopo che il contenuto è stato diviso in colonne. Questo è un ottimo modo per dividere in colonne il contenuto rimanente.