Os browsers que suportam códigos W3C são: IE5+, NS6+, Opera, Mozilla.
Para os que se interessarem mais sobre o assunto, chequem este link (em Inglês): http://www.w3c.org/
Por que somente o suporte aos browsers W3C?
A tendência que temos hoje é de que todos os browsers convirjam para S.C. (Standards Compliant), que nada mais é que uma linguagem única que funcione em todos os navegadores.
Vamos primeiro, ter uma noção de como acessar uma camada.
Há duas formas de se acessar uma camada (tag DIV nos browsers W3C). Vamos utilizar somente 1 forma, a mais prática, que acessa a camada diretamente pela identidade dela.
A outra forma, que não convém neste tutorial explicar de forma mais profunda, é o acesso à camada via a captura da tag DIV; e, para chegar até a camada desejada, conta-se à partir do 0 a posição da camada no documento.
Como o primeiro método é mais prático, nós o usaremos.
Para acessar à camada, utilizaremos este código:
document.getElementById
Traduzindo, seu significado é documento.pegueElementoPelaIdentidade.
Acessando uma camada com identidade definida:
document.getElementById('nome_da_camada')
Já possuímos a base para o código JS, mas falta ainda explicar o código HTML da camada.
Para se ter uma boa idéia sobre DIVs, olhe este tutorial (também de minha autoria) netse endereço: http://forum.wmonlin...=ST&f=25&t=2651
Devo ressaltar, que estamos conversando neste momento sobre DHTML (JS + CSS). Hein?!
Para se atribuir estados, comportamentos, posiciomentos, tamanhos na camada, usamos CSS (cascading Style Sheets, ou Folhas de Estilo). Ao mesmo tempo, usamos recursos do XHTML (a tag DIV) e JavaScript (particularmente, DOM (Document Object Model, ou Modelagem de Objeto do Documento)). Esta interação, JS + CSS, a maioria dos autores atribuem como sendo DHTML (Dynamic HTML).
Bem, sabemos como criar camadas e como acessar uma camada.
Agora, vamos ver o algoritmo de como mostrar e esconder o nosso DIV.
função nome() {
se( camada escondida ) {
mostra camada;
} senão {
esconde camada;
}
}
Lembre-se do tutorial sobre DIVs... o atributo CSS VISIBILITY mostra ou esconde o DIV.
Para iniciar com a camada escondida, insira no seu atributo inicial VISIBILITY: hidden.
Para acessar a propriedade VISIBILITY, acessamos a camada e em seguida a visibilidade dela, desta forma:
document.getElementById('nome_da_camada').style.visibility
Sendo assim, podemos codificar nosso algoritmo para JS.
function camada() {
if( document.getElementById('nome_da_camada').style.visibility == "hidden" ) {
document.getElementById('nome_da_camada').style.visibility = "visible";
} else {
document.getElementById('nome_da_camada').style.visibility = "hidden";
}
}
Com isso, concluímos o objetivo do tutorial. Para chamar a função, use como ONCLICK isto:
camada();
A partir de agora, vamos melhorar a performance do nosso código.
Observe que a tag document.getElementById('nome_da_camada') se repete várias vezes. poderíamos atribuí-la numa variável a somente chamar a variável + .style.visibility. Isso melhoraria o tamanho do código (ficaria menor) e ajudará nos próximos upgrades que daremos daqui a pouco.
Fazendo a atribuição na variável, nosso código ficaria assim:
function camada() {
var sDiv = document.getElementById('nome_da_camada');
if( sDiv.style.visibility == "hidden" ) {
sDiv.style.visibility = "visible";
} else {
sDiv.style.visibility = "hidden";
}
}
A chamada para a função, continuaria a mesma.
Bem melhor assim, não?!
Se você analisar o tamanho do código em TXT, veremos que o primeiro usa 275 bytes e o segundo, 215 bytes. Por mais que você possa dizer que a diferença é pequena, qualquer redução no tamanho do código, aumenta a performance do seu site.
Até o exato momento, se você quisesse utilizar somente uma camada, este código seria suficiente para mostrar/esconder nossa camada. Mas imagine utilizar 100 camadas... como ficaria? Usaremos 1 código para cada camada? Não... seu arquivo ficaria com o tamanho de centenas de kb. Isto seria inviável para um site.
Por isto, existe um recurso chamado passagem de parâmetros. Com ele, podemos chamar diferentes camadas usando somente um código.
Vamos ver como fica nosso código usando passagem de parâmetros:
function camada( sId ) {
var sDiv = document.getElementById(sId);
if( sDiv.style.visibility == "hidden" ) {
sDiv.style.visibility = "visible";
} else {
sDiv.style.visibility = "hidden";
}
}
Pode-se notar que alteramos somente um pequeno trecho de código ('nome_da_camada' para sId) e atribuímos um parâmetro sId na chamada da função. Assim, alteramos a forma de como chamá-la e o código passado anteriormente (camada();) não seria mais válido. Agora, temos que usar assim nosso código:
camada('nome_da_camada');
Lembre-se que não adianta nada possuir o código, a chamada, sendo que não temos a camada definida; portanto, FIQUE ATENTO!
Para concluir, fiz um código de exemplo e vou postá-lo aqui.
Lá vai!
<HTML>
<HEAD>
<TITLE>Mostrar/Esconder camadas - por Guilherme Blanco</TITLE>
<script>
function camada( sId ) {
var sDiv = document.getElementById( sId );
if( sDiv.style.visibility == "hidden" ) {
sDiv.style.visibility = "visible";
} else {
sDiv.style.visibility = "hidden";
}
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" ONCLICK="camada('menu');">Abre e fecha a camada 'menu'</A>
<!-- Camada 'menu' -->
<DIV ID="menu" STYLE="POSITION: absolute; TOP: 35px; LEFT: 5px; WIDTH: 400px; HEIGHT: 300px; ZINDEX: 2; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: hidden;">
Testando a visibilidade da camada
</DIV>
</BODY>
</HTML>Salve este código como um arquivo HTML e teste-o no seu navegador.
Espero ter dado uma boa noção de DIVs e a alternância de visibilidade de camadas aqui.
Caso alguma dúvida, entre em contato comigo.
