Listas UL OL en columnas con jQuery

via Kabytes by Pablo on 5/5/10


Uno de los elementos más utilizados en el diseño web son las listas, las mismas se pueden estilizar muy fácilmente utilizando CSS, basta con aplicar algunos estilos para que podamos obtener un resultado más que aceptable.

Uno de los grandes problemas a la hora de trabajar con listas tanto ul o ol es de utilizar una disposición en columnas, que si bien se puede realizar sin problemas puede dar algunos dolores de cabeza, principalmente con el tema de la compatibilidad con los distintos navegadores. Pero esto puede ser algo del pasado gracias a Easy List Splitter, un plugin jQuery para crear columnas a partir de listas.

En la sección de demostración hay más ejemplo, el siguiente es uno de ellos:

listas css columnas

La implementación es sumamente simple y muy limpia, que creo el aspecto más importante, por un lado vamos a tener la lista común y corriente:

<ul class="my-list">         <li>Lorem ipsum 1</li>         <li>Donec pede 2</li>         <li>Fringilla vel 3</li>         <li>Eget arcu 4</li>         <li>In enim 5</li>         <li>Lorem farem 6</li> </ul>

Y finalmente hacemos la llamada al código jQuery indicando la cantidad de columnas:

$('.my-list').easyListSplitter({ colNumber: 3 });

Un plugin interesante y que merece la pena conocer :D

Web: Easy List Splitter

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: