SummArg | Cursos y recursos para webmasters

18/02/2011

Dividir textos en columnas automáticamente utilizando jQuery Columnize

Columnizer es un excelente plugin para jQuery que nos permite dividir en columnas cualquier texto (incluso con imágenes) con gran flexibilidad. Es una gran alternativa a la propiedad -column CSS3 que es sólo soportada por algunos navegadores modernos. Funciona perfecto en WordPress para quienes deseen utilizarlo 😉

Debemos descargar Columnizer desde esta ubicación e insertarlo junto con jQuery en el encabezado de la página que deseamos utilizar:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.columnizer.js" type="text/javascript" charset="utf-8"></script>

Acto seguido, inicializamos el script:

	<script>
		$(function(){
			$('.wide').columnize({width:400});
			$('.thin').columnize({width:200});
		});
	</script>

Ahora colocaremos el texto dentro de un div con clase wide para el caso en que deseamos columnas de 400px de ancho, y clase thin para obtener columnas de 200px de ancho.

<div class="wide">
		<h1>Lorem ipsum ne justo</h1>
		<p>Mucho texto!!!</p>
</div>
<div class="thin">
		<h1>Lorem ipsum ne justo</h1>
		<p>Mucho texto!!!</p>
</div>

Din dudas un excelente recurso simple de usar y con muchas alternativas en su configuración!


Dejar un comentario