|
|
|
||||||||||||||||||||||
|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
Parceiros - CSS para Web Design - S.O.S Designers - Slackware-Brasil - Crie seu Web site - Oficina da Net |
Sub-menu em outra janelaFaremos 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. 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.
Autoria e outras referências sobre este artigo Dentro deste artigo: + 1 manual relacionado + 1 categoria relacionada + 4 Comentários sem rever
Manuais relacionados com este artigo Dentro de Workshop de Javascript Seguinte: Degradê de cor Javascript Anterior: Tabela de cores com Javascript Categorias relacionadas Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo: + Entrar em Scripts em JavascriptComentário sem rever
|
| Sobre nós | Copyright | Anuncie | Entrar em contato | <criarweb> |