Conceito TI: Dividindo Lista em Colunas

Depois de um tempo sem escrever nada e vendo um problema descrito em uma das listas do Facebook hoje, onde a pessoa que buscava realizar a quebra em colunas a cada "x" elementos, resolvi testar pois, de início não me pareceu tão complexo (a menos é claro que eu tenha entendido mal). A ideia é que, a cada 13 elementos, o código quebre em colunas os itens da lista. Para ver funcionando, basta copiar o código abaixo, criar um arquivo novo com o conteúdo e abrir em um navegador qualquer. Para "popular" a lista, informe uma quantidade de itens e clique no botão "Adicionar" e logo depois, no item "Ajustar em Colunas". O código separa em colunas de acordo com o tamanho da lista, tentando ocupar o máximo da tela. Bem, como o código é bem básico, vou apenas apresentar o código.

<html>
<script>

$ = function(nId){ return document.getElementById(nId); }

adiciona = function(qtd, destino){
    var ultimo = destino.getElementsByTagName('li').length;
    for( var i=0; i<qtd; i++ ){
        var novoTexto = ultimo + i + 1;
        li = document.createElement('li');
        li.innerHTML = 'Li '+novoTexto;
        destino.appendChild(li);
    }
}

ajusta = function(alvo, maxItens){
    var lista = alvo.getElementsByTagName('li');
    var colunas = Math.ceil( lista.length/maxItens );
    var tm = Math.floor( 100.0/colunas )-2;    
    var j = 0, uDiv;
    for ( var i=0; i<lista.length; i++){
        if (j == 0){
            uDiv = document.createElement('div');
            uDiv.style.float = 'left'
            uDiv.style.width = tm+'%';
            alvo.appendChild( uDiv );
        }
        uDiv.appendChild( lista[0] );
        j++;
        if (j==13) j=0;
    }
}

</script>
<body>
    <h4>Comandos</h4>
    <label for="qtdLI">Quantidade de Itens a Adicionar na Lista:</label>
    <input type="text" id="qtdLI" value="1" />
    <input type="button" value="Adicionar" 
      onclick="adiciona( $('qtdLI').value, $('lista') );">
    <input type="button" value="Ajustar em Colunas" 
      onclick="ajusta($('lista'), 13);">
    <br><br>
    <h4>Colunas</h4>
    <hr>
    <ul id="lista">    
    </ul>
</body>
</html>

Claro que o código pode ser melhorado, otimizado e adaptado às necessidades de cada um (utilizar jQuery ou aplicar um estilo mais elaborado usando o className por exemplo). Como eu disse, o código pode ser melhor elaborado, mas para se ter uma base já ajudaria. Bem, é isso.

Conceito TI

quinta-feira, 19 de fevereiro de 2015

Dividindo Lista em Colunas

Nenhum comentário:

Postar um comentário

Páginas