Faremos um sub-menu de opções que se mostra em uma janela secundária e uma vez selecionada a opção do sub-menu se transfere para a janela pai.Por Miguel Angel Alvarez - Tradução de JML
Publicado em: 09/6/06
Vamos realizar um pequeno exemplo sobre como trabalhar com janelas secundárias ou popups. As janelas secundárias são essas janelinhas que se abrem além da janela principal do navegador e em geral, molestam um pouco em determinados sites gratuitos.
Para abrir essas janelas se utiliza a linguagem Javascript, mais concretamente, o método open() do objeto window. Não vamos explicá-lo aqui, porque já temos um artigo inteiro que explica detalhadamente a abertura de janelas secundárias e as características com as quais podemos abrir:
Abrir janelas secundárias
Neste exemplo, iremos um pouco mais além, vamos criar uma janela secundária e a partir dela, vamos acessar às propriedades da janela pai, ou seja, a janela que a abriu. O exercício será o seguinte:
Teremos uma página com fundo branco, um campo de texto vazio e um botão. Quando se clique o botão, abriremos um popup que conterá uma tabela com as cores puras de HTML. O visitante poderá selecionar uma dessas cores e então, o fundo da página pai mudará para esta cor e a cor será escrita no campo de texto. É muito mais fácil
ver o exemplo em funcionamento para compreender a explicação.
Página pai
A página original conterá um simples formulário com um botão e um campo de texto. Ademais, conterá o script Javascript necessário para abrir a janela secundária.
<html>
<head>
<title>Sub-menu em janela a parte</title>
<script language="JavaScript">
function lancarSubmenu(){
window.open("submenu_janela2.html","janela1","width=400,height=400,scrollbars=YES")
}
</script>
</head>
<body bgcolor="#ffffff">
<form>
<input type="text" name="colorin" size="12" maxlength="12">
<br>
<br>
<input type="button" value="Lançar sub-menu" onclick="lancarSubmenu()">
</form>
</body>
</html>
A função lancarSubmenu() é a que contém o script para abrir o popup. Para isso utiliza o método open() do objeto window, cujo uso foi descrito no artigo de
Abrir janelas secundárias.
O formulário é dos mais normais. O único destacável é o atributo onclick do botão, que serve para definir as ações para serem executadas ao clicarmos o botão, neste caso uma chamada à função que abre a janela secundária.
Página secundária
A página secundária é um pouco mais complexa, mas a parte que nos interessa neste exercício é bastante simples. O importante da página é que tem que acessar à janela pai para modificar seu estado e para isso utiliza um objeto Javascript: opener.
O objeto opener está disponível nas páginas que são janelas secundárias e faz referência à janela que a abriu, ou seja, a janela pai. Em outras palavras, o objeto opener na janela popup é um sinônimo do objeto window na janela pai.
O script que acessa à janela pai é o seguinte:
<script language="JavaScript">
function atualizaPai(minhaCor){
window.opener.document.bgColor = minhaCor
window.opener.document.forms[0].colorin.value = minhaCor
}
</script>
A função atualizaPai() é a encarregada de realizar o trabalho. Recebe o código da cor sobre a qual foi clicada. Na primeira linha mudamos a cor da página web pai e na segunda linha colocamos o código RGB da cor recebida por parâmetro no campo de texto.
Como vemos, o objeto opener também depende do objeto window da página, como todos os demais objetos da hierarquia Javascript.
O resto da página é parecido a um artigo anterior de Javascript no qual
escrevíamos com Javascript uma tabela de cores puras, com umas pequenas modificações para adapta-la às nossas necessidades. Pode-se ver a seguir:
<table width="80%" align="center" cellpadding="1" cellspacing="1">
<script language="javascript">
var r = new Array("00","33","66","99","CC","FF");
var g = new Array("00","33","66","99","CC","FF");
var b = new Array("00","33","66","99","CC","FF");
for (i=0;i<r.length;i++)
for (j=0;j<g.length;j++) {
document.write("<tr>");
for (k=0;k<b.length;k++) {
var nuevoc = "#" + r[i] + g[j] + b[k];
document.write("<td bgcolor=\"" + novoc + "\" align=center><font size=1 face=verdana>");
document.write("<a href=\"javascript:atualizaPai('" + novoc + "')\">");
document.write(novoc);
}
document.write("</a></font></tr>");
}
</script>
</table>
Visto a complicação deste script e dado que não vamos explicá-lo tudo outra vez, pode ser altamente recomendável a leitura do artigo anterior chamado
Tabela de cores com Javascript.
O mais importante para nós agora é entender que este script cria uma tabela com todos as cores puras, colocadas cada uma em uma célula. Dentro de cada célula se escreve um link que chama à função atualizaPai() passando-lhe o código da cor que há que ser utilizada.
Podemos
ver o exemplo em funcionamento.
Comentários do artigo
