Crear multiples columnas de una misma lista
Escrito el 29 Apr, 2010 por Alexis en jQuery
Easy List Splitter es uno de esos plugins que a veces nos llegan del cielo. Seguramente más de una vez te habrá pasado que necesitas dividir o separar una lista en diferentes columnas, y la única solución es trabajar,como siempre con CSS.
Este pequeño plugin se encarga de hacer trabajo por nosotros, es decir creara la cantidad de columnas que se le indiquen devolviendo un código HTML valido y sin necesidad de añadir o modificar nuestro hoja de estilo, es decir no se añaden ningún tipo de elemento innecesario o elemento inline.
Caracteristicas
- Crea columnas a partir de listas ordenadas (
<ol>) y desordenadas (<ul>) - Podemos definir la cantidad de columnas en las que se dividirá la lista
- Todo lo referido al CSS es independiente del plugin (fácil de controlar)
- Se añade un class last al ultimo
<ol>o<ul>para controlar elpaddingomargin - Podemos ordenar nuestras columnas vertical u horizontalmente
Uso
Como lo mencione anteriormente, su uso es de lo mas sencillo, por ejemplo podemos tener este markup:
<ul class="my-list"> <li><a href="#">Lorem ipsum 1</a></li> <li><a href="#">Donec pede 2</a></li> <li><a href="#">Fringilla vel 3</a></li> <li><a href="#">Eget arcu 4</a></li> <li><a href="#">In enim 5</a></li> <li><a href="#">Lorem farem 6</a></li> </ul>
Para dividir nuestra lista en tres columnas diremos:
$('.my-list').easyListSplitter({ colNumber: 3 });
Lo que nos mostrar esta nueva lista
list item 1 list item 4 list item 7 list item 2 list item 5 list item 8 list item 3 list item 6
Por defecto la alineación es vertical, si necesitamos lograr una alineación horizontal, escribiremos:
$('.my-list').easyListSplitter({ colNumber: 3, direction: 'horizontal' });
Lo que se vera reflejado como:
list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 list item 7 list item 8
Hermoso, no?
En el site del plugin encontraras algunos ejemplos más, junto con toda la documentación necesaria para que puedas implementar este plugin en tu diseño
2 comentarios to “Crear multiples columnas de una misma lista”
Trackbacks/Pingbacks
Back to TopDejar un comentario
Additional comments powered by BackType
















baires |29/4/2010| Site: twitter.com/baires
Crear multiples columnas de una misma lista http://goo.gl/fb/3LKES #jquery #plugin
This comment was originally posted on Twitter
unique3w |30/4/2010| Site: twitter.com/unique3w
Crear multiples columnas de una misma lista | Eliseos.net. http://icio.us/30yxgl
This comment was originally posted on Twitter