Recentemente estou trabalhando no novo layout do Portal do Professor (http://portaldoproferssor.mec.gov.br), no qual projetei o conteúdo separado por caixas que possuem cantos arredondados, sombra, sombra interna, degradê e linhas de borda, como pode ver abaixo:
Com esta combinação deixei o cliente satisfeito com o resultado visual, mas acabei projetando um verdadeiro problema para estruturar o XHTML, pois preciso agora de 6 imagens de fundo para cada caixa e devido ao meu layout ser líquido / elástico, acabei com a seguinte estrutura:
<span class="wrap1´´>
<span class="wrap2´´>
<span class="wrap3´´>
<span class="wrap4´´>
<span class="wrap5´´>
<span class="wrap6´´>
<div class="box">
<h2>Wrap</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tempor. Fusce lacinia. Duis blandit tincidunt lectus. Donec tortor. Nam fringilla justo vitae erat. Vivamus lobortis dui a nisl. Proin justo ante, lacinia non, aliquet in, egestas ac, leo. Sed metus libero, ornare eu, sagittis elementum, vulputate a, erat. Aliquam porttitor.
</p>
</div>
</span>
</span>
</span>
</span>
</span>
</span>
Acabei tendo que escrever um código repetitivo e nada semântico, além de tornar meu código mais difícil de manter, prejudicando assim a escabilidade de um portal que está constantemente recebendo novas implementações.
Para solucionar isto, resolvi escrever um código javascript, que insere tags <span> de forma dinâmica deixando o meu código XHTML apenas com a <div class=”box”>…</box>, como abaixo:
<div class="box">
<h2>Wrap</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tempor. Fusce lacinia. Duis blandit tincidunt lectus. Donec tortor. Nam fringilla justo vitae erat. Vivamus lobortis dui a nisl. Proin justo ante, lacinia non, aliquet in, egestas ac, leo. Sed metus libero, ornare eu, sagittis elementum, vulputate a, erat. Aliquam porttitor.
</p>
</div>Para inserir as tags <span> necessárias para inserir as imagens de fundo na caixa, lembrando que cada tag aceita apenas uma imagem de fundo, escrevi o script a seguir:
// Crio um array
var alltags = new Array();
function changeBox() {
// O método getElementsByTagName() retorna um array com todas os elementos <div> que existem no documento e armazena no array alltags.
var alltags=document.getElementsByTagName("div");
// A estrutura de repetição for passa por cada elemento <div> armazenado em alltags.
for (i=0; i<alltags.length; i++) {
// Verifica se o elemento tem a classe box.
if (alltags[i].className==´box´) {
// Armazena na variável element em cada interação do for o velor armazenado no índice i de alltags
var element = alltags[i];
// Armazena o objeto pai de element na variável content
var content = element.parentNode;
// Cria os elementos XHTML <span>
var wrap1 = document.createElement(´span´);
var wrap2 = document.createElement(´span´);
var wrap3 = document.createElement(´span´);
var wrap4 = document.createElement(´span´);
var wrap5 = document.createElement(´span´);
var wrap6 = document.createElement(´span´);
// Atribui para cada elemento XHTML <span> uma classe
wrap1.setAttribute(´class´, ´wrap1´);
wrap2.setAttribute(´class´, ´wrap2´);
wrap3.setAttribute(´class´, ´wrap3´);
wrap4.setAttribute(´class´, ´wrap4´);
wrap5.setAttribute(´class´, ´wrap5´);
wrap6.setAttribute(´class´, ´wrap6´);
// Insere um elemento filho ao elemento atual, antes de um determinado elemento. O elemento wrap1 é inserido em content antes de element
// Mais informações do método insertBefore no endereço: http://developer.mozilla.org/pt/DOM/element.insertBefore.
content.insertBefore(wrap1, element);
// O elemento wrap1 recebe o novo elemento wrap2. E assim acontece com os demais elementos respectivamente.
// Mais informações do método appendChild no endereço: http://developer.mozilla.org/Pt/DOM/Element.appendChild.
wrap1.appendChild(wrap2);
wrap2.appendChild(wrap3);
wrap3.appendChild(wrap4);
wrap4.appendChild(wrap5);
wrap5.appendChild(wrap6);
// Remove element de content
content.removeChild(element);
// E insere element para wrap6
wrap6.appendChild(element);
}
}
}
// Executa a função
changeBox();E para finalizar nossas caixas, vamos estilizá-las com CSS. Não irei comentar o CSS, pois acredito que se chegou até aqui buscando solução para um problema semelhante, já domine a linguagem.
Além do CSS que estilizam as classes que atribuímos por JavaScript às tags <span>, escrevi outros estilos para compor a página e representar melhor o exemplo.
*{
padding:0;
margin:0;
font:1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
body{
background:transparent url(bg_body.png) repeat left top;
font-size:11px;
padding:100px 400px;
}
h2{
font-size:1.5em;
padding-bottom:.5em;
}
p{
color:#666;
}
.box{
padding:25px 30px 30px;
}
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .wrap6 {
display:block;
}
.wrap1 {
background:transparent url(bg_cr.png) repeat-y right center;
margin-bottom:1em;
}
.wrap2 {
background:transparent url(bg_cl.png) repeat-y left center;
}
.wrap3 {
background:transparent url(bg_tr.png) no-repeat right top;
}
.wrap4 {
background:transparent url(bg_tl.png) no-repeat left top;
}
.wrap5 {
background:transparent url(bg_br.png) no-repeat right bottom;
}
.wrap6 {
background:transparent url(bg_bl.png) no-repeat left bottom;
}Espero que visite o Portal do Professor daqui a algum tempo e veja o resultado prático do que estou falando aqui.
Um abraço e até o próximo artigo!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?