Funções Genéricas

Conteúdo

E aí pessoal tudo bom??

A um tempo atrás tive uma grande tarefa de ocultar e aparecer diversas divs dentro de várias páginas, até aí tudo bem, fazer sumir e aparecer é fácil, mas imagina ter que acrescentar uma div numa página e em outra ter que retirar, ia lá e mudava a função javascript de cada página, num belo dia estava olhando para minha tela com saco cheio de ter que modificar mais uma vez a mesma função que já tinha modificado umas sete vezes a uns dez minutos atrás e tive um estalo. Reduzi as minhas cinco funções para somente uma. E é isso que vou mostrar como é fácil e que pode ser utilizado para várias outras coisas.

Uma das antigas funções que utilizava era:

<script type=”text/javascript”>
var flag;
function mostraEscondeDivs(campo1, campo2, campo3){
if(flag == 0 || flag == null){
document.getElementById(campo1).style.display = ‘block’;
document.getElementById(campo2).style.display = ‘block’;
document.getElementById(campo3).style.display = ‘block’;
flag = 1;
}else{
document.getElementById(campo1).style.display = ‘none’;
document.getElementById(campo2).style.display = ‘none’;
document.getElementById(campo3).style.display = ‘none’;
flag = 0;
}
}
</script>

E a cada inclusão e/ou retirada de divs tinha de ser modificada a função javascript.

Agora vamos ver a nova e reduzida função:

<script type=”text/javascript”>
var flag;
function mostraEscondeDivs(){
_divs = arguments.length;
if(flag == 0 || flag == null){
for(var x=0; x < _divs; x++){
document.getElementById(arguments[x]).style.display = ‘block’;
}
flag = 1;
}else{
for(var x=0; x < _divs; x++){
document.getElementById(arguments[x]).style.display = ‘none’;
}
flag = 0;
}
}
</script>

Pronto, temos uma função que conta quantos parâmetros passamos e esconde ou mostra as divs exemplo:

javascript:mostraEscondeDivs(‘div1′,’div2′,’div3′);
javascript:mostraEscondeDivs(‘div1′);
javascript:mostraEscondeDivs(‘div1′,’div2′,’div3′,’div4′,’div5′,’div6′);

Uma mão na roda na hora de retirar ou incluir divs, a única coisa que devo mudar é na chamada da função, onde incluo ou retiro os nomes das divs.

O mesmo pode ser feito para formulário, quer ver se determinados campos estão vazios e não quer fazer um if else só para isso, utilize o arguments, para pegar os parâmetros passados na função e verifique se estão ou não vazios.

Para quem quiser segue os arquivos zipado desse artigo, tanto o exemplo do código antigo, como o novo.

Bom espero que gostem e dêem sugestões para os próximos.

Autor: Eughenio Constantino- Colunista Web Standards do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.

Galeria de Fotos

Conteúdo

E aí pessoal, tudo bom??

Antes de tudo quero me apresentar, sou Eughenio Constantino e estou muito feliz em poder escrever aqui no mxstudio.

Como esse é meu primeiro artigo farei algo bem simples de como o XHTML, o CSS e o Javascript pode nos ajudar no dia a dia.

Você já deve ter enfrentado de publicar lado a lado mais do que 50 fotos para uma galeria de fotos usando tabela e aquela infinidade de células, se não teve ainda esse confronto ótimo, aqui você já se prepara para isso.

Vamos lá, você precisa tratar as imagens no tamanho que você quiser, eu costumo utilizar elas no tamanho de 150 x 113 px e renomea-las num padrão: prefixo + sufixo numérico.extensão, exemplo: foto_01.jpg ou fotoPeq01.gif (sempre utilizando o zero na frete do número que for menor que dez e sempre iniciamos as fotos com o número 1).

Vamos começar com o código javascript, ele que monta a lista automaticamente das fotos para nós.

<script type=”text/javascript”>
/*
Nossa função chama publicaFotos e nela passamos os parâmetros:
mDiv – A div que ficará nossas fotos;
nFotosLinha – Número de fotos por linha;
nTotalFotos – Número total de fotos na pasta;
prefFotos – Prefixo das fotos (lembre do nosso padrão de nomeclatura: foto_01.jpg);
pastaFotos – Endereço da pasta onde estão as fotos.
extensao – A extensão que utilizamos nas fotos.
*/

function publicaFotos(mDiv, nFotosLinha, nTotalFotos, prefFotos, pastaFotos, extensao){
//É na variável _images onde guardaremos todo o nosso código da lista de fotos.
var _images = ”;

//Aqui iniciamos o laço de repetição onde a variável “x” será nosso contador para o número total de fotos.
for(var x = 1; x <= nTotalFotos; x++){

//Aqui abrimos a <ul> da nossa galeria de fotos
_images +=”<ul>”;

//Aqui iniciamos o laço de repetição para gerar as fotos que ficarão lado a lado.
for(y = 1; y <= nFotosLinha; y++){

//A variável fot vira nosso sufixo das fotos.
fot = x + (y-1);

//Aqui verificamos se nosso sufixo é menor que dez caso seja coloca o zero na frente.
if(fot < 10){
fot = “0″+fot;
}

//Aqui temos uma condição de que caso o número do nosso sufixo seja menor que a quantidade de fotos ele não coloca mais a tag <li> com os parâmetros das fotos.
if(fot <= nTotalFotos){
_images += “<li><img src=’”+ pastaFotos + prefFotos + fot + “.” + extensao +”‘ /></li>”;
}else{
return false;
}
}

//Caso o nosso sufixo seja maior que a quantidade de fotos por linha, ele fecha o <ul>
_images +=”</ul>”;

//Voltamos o x para o último número do sufixo e voltamos para o primeiro laço de repetição para gerarmos mais uma linha de fotos.
x = fot;
}

//Aqui publicamos em nossa div todo código pronto da nossa galeria.
document.getElementById(mDiv).innerHTML = _images ;
}
</script>

O css que utilizamos é simples e básico ele somente deixará os <li> lado a lado:

#mfotos ul li{
display:inline;
padding:4px;
}

Pronto temos uma galeria de fotos em XHTML e validada pelo W3C.

Como tudo que faço, eu testo, para quem quiser segue os arquivos zipado desse artigo.

Bom espero que gostem e dêem sugestões para os próximos.

Autor: Eughenio Constantino- Colunista Web Standards do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.