Dividir uma lista em colunas pode não ser tão simples quanto criar sublistas inserindo mais tags HTML ul ou ol, principalmente quando se trata de html gerado por algum gerenciador de conteúdo.
Em outro projeto, precisava dividir uma lista em colunas sem que isso resultasse também na necessidade de muitas alterações no CSS, por isso escrevi um código jQuery que divide a lista adicionando elementos div. Em listas ul ou ol, semanticamente, não deveria inserir um elemento div, mas foi o que melhor resolveu o problema.
[code language=”javascript”]jQuery.fn.extend({
splitListMany: function(cols){
var list = $(this);
var listLen = $(this).length;
var colSize;
var columns;
if ((cols == null)||(cols <= 0)||(columns >= listLen)) { columns = 2; }
else if (cols >= (listLen/2)) { columns = Math.floor(listLen/2); }
else { columns = cols; }
if (listLen%columns > 0) { colSize = Math.ceil(listLen/columns); }
else { colSize = listLen/columns; }
for(var i=1; i <= columns; i++){
list.slice((i-1)*colSize,i*colSize).wrapAll(‘<div class="lists list-‘+i+’">’);
}
return $(this);
}
});[/code]
Escolhi alguns títulos de posts que escrevi aqui no blog e criei uma lista de “posts mais lidos”; para que o exemplo fique mais simples, a lista terá seis itens e será dividida em duas colunas.
- 1 — Filme: Capitães da Areia
- 2 — Login no Google com verificação em duas etapas
- 3 — Filme: Assalto ao Banco Central
- 4 — Filme: O Discurso do Rei
- 5 — Roupas esportivas com compressão
- 6 — Dicas para pedalar no inverno
[code language=”javascript”]$(‘#posts-mais-lidos li’).splitListMany(2);[/code]
Aplicando splitListMany, a lista terá os elementos div que destaquei abaixo:
[code language=”html”]<ul>
<div class="lists list-1">
<li>1 — Filme: Capitães da Areia</li>
<li>2 — Login no Google com verificação em duas etapas</li>
<li>3 — Filme: Assalto ao Banco Central</li>
</div>
<div class="lists list-2">
<li>4 — Filme: O Discurso do Rei</li>
<li>5 — Roupas esportivas com compressão</li>
<li>6 — Dicas para pedalar no inverno</li>
</div>
</ul>[/code]
Assim é necessário apenas adicionar algumas linhas de CSS para finalizar o posicionamento:
[code language=”css”].lists {
float:left;
width:50%;
}[/code]
- 1 — Filme: Capitães da Areia
- 2 — Login no Google com verificação em duas etapas
- 3 — Filme: Assalto ao Banco Central
- 4 — Filme: O Discurso do Rei
- 5 — Roupas esportivas com compressão
- 6 — Dicas para pedalar no inverno
A função recebe o número de colunas que se deseja criar e tem algumas verificações para que não se tente dividir a lista em um número de colunas maior que o de elementos, por exemplo. E, de forma mais genérica, essa função pode ser usada para agrupar outros elementos.