Contenido

jQuery.multicol(), dale columnas a tu texto

26 Nov

+ 10

A la espera de la especificación CSS3 y que los navegadores las implemente perfectamente, si queremos convertir en columnas nuestro contenido tenemos que usar herramientas como jQuery.multicol().

jquerymulticol

Instalación

La instalación es similar a la de cualquier componente desarrollado en Javascript, simplemente hemos de llamar al fichero que lo contiene en nuestro <head />

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/multicol.min.js"></script>

Una vez cargado el contenido, debemos indicar que elemento será el que convertiremos en multicolumnas, para ello usaremos la selección CSS3 de jQuery.

$(document).ready(function(){
	$("selector").multicol({colNum: 3, colMargin: 20});
});

Como podemos ver, tenemos 2 parámetros que podemos pasarle a la función multicol()

  • colNum: Número de columnas en las que debe cortarse el texto.
  • colMargin: Margen en píxeles que separará las columnas.

Descargar

[Descargar]

Interesante para quien necesite hacer un diario noticias online, como comentas quedamos a la espera de la implantación CSS3.

Gracias por el aporte.

Excelente, es justo lo que necesito para un diseño. Me has salvado la vida :D

Bueno, hay que toquetear algo de css por que por defecto se corta la primera y ultima linea de cada párrafo.

He conseguido que se vea “casi” perfecto, pero siempre acaba por cortar algun pixel…

http://hdesign.es/prueba.html

He probado lo que pone en la web de:

selector { line-height: 18px; }
selector p, selector h2, selector h3, selector h4, selector h5, selector h6 {
margin-bottom: 18px;
}

que no se si era para solucionar esto o no (digamos que el japonés no es mi idioma materno :P ) el caso es que no me ha funcionado.

De todos modos, gran componente!

no me habia dado cuenta de un fallo bastante grande, y es que el texto no es seleccionable de una columna a otra.

Y esto no creo que se pueda arreglar por css :P

@hdnennison: En tu ejemplo, en la primera y segunda columna se corta el texto horizontalmente en su parte inferior y superior. Puede ser por tu implementación, o que quizá el plugin es el que lo hace de forma automática?. Lo estoy viendo en Firefox 3.

Perfecto, justamente buscaba algo similar. Se agradece!

hi ( ・์ω・์)
i created this plugin.

thank you for your introduction.
im japanese so not good at english and also spanish.
but javascript is world wide language <3

No me ha funcionado en Google Chrome

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.