3

O que pretendo criar, é semelhante a Grid view utilizado em sistemas do tipo Mercado Livre. Seria uma função feito em javascript que alterna entre uma Lista ou Galeria, utilizando os mesmos dados em forma de tabela.

Expondo a dúvida - Suponho mostrar screenshot de jogos em flash com suas respectivas informações a frente, em modo Lista. Contudo se o usuário não deseja ver em modo Lista, após o clique no botão, como agrupa-los novamente dentro da página em modo Galeria?

Então, estou buscando num só código fazer as duas coisas distintas, algo como:

if(condição)
{
     ...
    Lista
     ...
   }else{
     ...
    Grade
     ...
}

A princípio, imagino que poderia ser divs retangulares que, ao clicar no botão elas redimensiona o tamanho para quadrados, pondo-se lado a lado.

1
  • 2
    Não faço ideia do que é um código ou função "Lista/Galeria"... podes explicar melhor?
    – Sergio
    Commented 9/05/2016 às 5:16

2 Respostas 2

2

Diego, defina os elementos que serão exibidos em cada grupo, no exemplo abaixo eu chamei o grupo de card e cada card possui uma imagem, titulo e desc.

então defina o espaço onde as card vão ser exibidas, no exemplo abaixo estou limitando o espaço delas pela div#container.

defina uma classe para cada tipo de exibição, novamente vamos utilizar apenas lista e grid, mas você pode definir quantos modelos desejar.

defina um tamanho para a card para cada disposição do container, no exemplo abaixo temos:

div#container.lista: .card{ width: calc(100% -10px); height: 128px; }
div#container.grid: .card { width: 192px; height: 192px; }

agora faça o mesmo para possicionar cada elemento (div.image, div.title, div.desc) da card na posição correta.

agora basta trocar a classe da div#container para mudar o layout.

var container = document.querySelector(".container");
var disposicao = document.querySelector("#disposicao");
var curClass = container.classList.contains("lista") ? "lista" : "grid";

disposicao.addEventListener("change", function (event) {
  container.classList.remove(curClass);
  curClass = disposicao.value;
  container.classList.add(curClass);
});
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background: whitesmoke;
}

.container {
  position: absolute;
  max-width: 1080px;
  padding: 5px;
  margin: auto;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background: white;
  box-shadow: 0px 0px 10px black;
  box-sizing: border-box;
  overflow: auto;
}

#disposicao {
  width: 100%;
}

.card .imagem  {
  background-image: url('http://image005.flaticon.com/1/png/512/119/119706.png');
  background-size: calc(100% - 10px);
  background-repeat: no-repeat;
  background-position: center;
}

.lista .card {
  position: relative;
  margin: 5px;
  width: calc(100% - 10px);
  height: 128px;  
  box-shadow: 0px 0px 5px black;
  border-radius: 3px;
}

.lista .card .imagem {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 128px;
  height: 128px;
  border-right: 1px solid silver;
  background-color: whitesmoke;
}

.lista .card .title {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 128px;
  height: 32px;
  line-height: 32px;
  padding-left: 5px;
  border-bottom: 1px solid silver;
}

.lista .card .desc {
  position: absolute;
  top: 32px;
  right: 0px;
  bottom: 0px;
  left: 128px;
  padding: 5px;
}

.grid .card {
  float: left;
  position: relative;
  margin: 5px;
  width: 192px;
  height: 320px;  
  box-shadow: 0px 0px 5px black;
  border-radius: 3px;
}

.grid .card .imagem {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 192px;
  height: 192px;
  border-bottom: 1px solid silver;
  background-color: whitesmoke;
}

.grid .card .title {
  position: absolute;
  top: 192px;
  height: 32px;
  width: 192px;
  line-height: 32px;
  padding-left: 5px;
  border-bottom: 1px solid silver;
}

.grid .card .desc {
  position: absolute;
  top: 222px;
  bottom: 0px;
  width: 192px;
  padding: 5px;
}
<div class="container lista">
  <div>
    <select id="disposicao">
      <option value="lista">Lista</option>
      <option value="grid">Grid</option>
    </select>
  </div>
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div>  
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div> 
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div> 
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div> 
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div> 
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div> 
</div>

0

Em continuidade, a reposta de Tobias Mesquita que mostrou ser prático na forma como um List/Grid view se comporta, no que diz à respeito a elementos estilizados com CSS.

Não podia eu, ficar sem compartilhar a minha resposta como sempre faço. E quando o faço, é para deixar claro que alcancei o objetivo.

Neste caso, pondo o exemplo da resposta dada acima sobre teste em alguns navegadores obsoleto, houve algumas falhas(entre um caso e outro, estava o CSS ou Javascript a não funcionar conforme o esperado), já que alguns navegadores de internet não suporta tal semântica moderna.

Cheguei a conclusão de que seria viável escrever um novo código compativel com diversos Navegadores de Internet(antigos e atuais), reaproveitando particularidades do conceito dado na resposta de Tobias Mesquita.

Em função disto, utilizei o Firefox 2.0 como base. Vejamos o código abaixo:

    function changeSrc(id){

    <!-- A variável "el" esta apontando para a div mestre, pela "TagName".  Tendo controle sobre ela o botão de alternância, ondeá faz de certo modo as divs se auto ajustar -->
    var el=document.getElementsByTagName('div')[0]; var imagem=document.getElementById(id); if(imagem.alt == "Abrir"){ imagem.src = "http://sl.uploads.im/t/yx4Ig.png"; imagem.alt = "Fechar"; el.className = "grade"; } else { imagem.src = "http://sm.uploads.im/t/sRShv.png"; imagem.alt = "Abrir"; el.className = "lista"; } }

    
/* Aqui inicializa a estilização do layout "Lista" */ .item img { width:100px; height:100px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; } .lista .item { position: relative; margin: 5px; width: 100%; height: 128px; box-shadow: 0px 0px 5px black; border-radius: 3px; } .lista .item .foto { position: absolute; top: 0px; left: 0px; width: 128px; height: 128px; border-right: 1px solid silver; background-color: whitesmoke; } .lista .item .nome { position: absolute; top: 0px; right: 0px; left: 128px; height: 32px; line-height: 32px; padding-left: 5px; border-bottom: 1px solid silver; font-weight: bold; display: block; font-size: 14pt; } .lista .item .desc { position: absolute; top: 40px; right: 0px; bottom: 0px; left: 128px; padding: 5px; display: block; font-size: 12pt; } /* A partir daqui, é a estilização do layout "Grade" */ .grade .item { float: left; position: relative; left: 90px; width: 192px; height: 320px; box-shadow: 0px 0px 5px black; border-radius: 3px; } .grade .item .foto { position: absolute; top: 0px; left: 0px; width: 192px; height: 192px; border-bottom: 1px solid silver; background-color: whitesmoke; } .grade .item .nome { position: absolute; top: 192px; height: 32px; width: 192px; left: 0px; line-height: 32px; padding-left: 5px; border-bottom: 1px solid silver; font-weight: bold; display: block; font-size: 14pt; } .grade .item .desc { position: absolute; top: 222px; bottom: 0px; width: 192px; left: 0px; padding: 5px; display: block; font-size: 12pt; }
<!-- Abaixo é esta a primeira div, logo no início, sem "id" ou "class" alguma. Ela  é a div mestre, fará com que as demais em seu interior sejam obrigatoriamente redimensionadas e alojadas -->
<!-- Isto se faz necessário para não precisar acrescentar códigos Javascript à mais no documento HTML, bastando apenas uma única div. -->
<!-- Se não fosse assim, logo teríamos de  cria vários ids ou names para cada uma das divs filhos e percorrer com um laço for -->

<div>

<!-- Nesta parte temos a div classificada como lista, que por sua vez  nos traz todo o conjuto de divs estilizada dentro do documento HTML -->
<div class="lista">

    <!-- Logo abaixo temos a tag img que será nosso único botão que alternar entre a opção Lista e Grade -->
    <img id="botao" alt="Abrir" src="http://sm.uploads.im/t/sRShv.png" onclick="changeSrc('botao')" />

    <hr>

    <!-- As alterações principais são feitas aqui, onde as letras do alfabeto que foram tidas como exemplo, deverão ser subtituídas pela tag image -->

    <!-- Nota! - Para a descrição é recomendado no mínimo 170 caracteres(digitos) ou no máximo 177 caracteres(digitos), dentro desta caixa -->
    <!-- Uma vez ultrapassado este limite dado, o usuário final terá uma visualização desagradável, texto exposto. -->
    <!-- Caso deseje por mais informações, o ideal é ajustar a mesma com novos valores em sua margem, no código CSS -->

    <div class="item">
        <div class="foto">A</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">B</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">C</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">D</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">E</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">F</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">G</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">H</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>

    

Enfim, quando você projeta com CSS precisa ter a habilidade de analisar o layout e decidir como colocar as div.

Foi por causa desta minha dificuldade em racionar div que fiz à pergunta.

Este outro exemplo abaixo, é ainda menor e portátil se comparado ao anterior.

A única diferença entre um e outro, fica por conta da estrutura CSS e Javascript. Veja:

function ativar(tag) {
    var el = document.getElementsByTagName('div');

    for (var i=0; i < el.length; i++) {
        if (el[i].className == "menos") {
            document.getElementById("clic").innerHTML = "Grade";
            el[i].className = "mais";
        } else {
            document.getElementById("clic").innerHTML = "Lista";
            el[i].className = "menos";
        }
    }
}
    /* Ajusta para o modo Lista(Tabela) */

    .mais {
        width: auto;
    }

    /* Ajusta para o modo Grade(Galeria) */

    .menos {
        width: 128px;
    }

    /* Estiliza o Menu(botão) */

    a:link {
        text-decoration: underline;
    }

    a:visited {
        color: navy;
        text-decoration: none;
    }

    a:hover {
        color: dodgerblue;
        text-decoration: none;
    }

    a:active {
        color: azure;
        text-decoration: underline;
        background-color: dodgerblue;
    }

    /* Fim Estilização do Menu */

    /* Estilização do Corpo da Página */

    * {
        margin: 0;
        padding: 0;
    }

    /* Estiliza o Parágrafo da Descrição */

    p {
        line-height: 20px
    }

    /* Estiliza os bloco de conteudo */

    #bloco {
        margin-left: 5%;
        float: left;
        left: 65%;
    }

    /* Estiliza os blocos que mantém as figura */

    #figura {
        background: whitesmoke;
        text-align: center;
        padding: 20px;
        margin: 5px;
        float: left;
    }

    /* Estiliza os blocos que mantém as figura */

    #conteudo {
        text-align: left;
        padding: 0px;
        margin: 5px;
        left: 35%;
    }
<center>

    <a href="javascript:void(0)" onclick="ativar(this)" id="clic">Lista</a>

</center>

<hr color="royalblue" size="1" width="100%" />

</br>

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 1 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 2 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 3 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 4 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 5 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 6 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 7 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 8 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 9 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
   <img src="http://lorempixel.com/128/96/" border="0" />
  </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 0 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

O código em si esta bem comentado e são auto-explicativo, não havendo qualquer dúvida, termino por aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .