Javascript para Exibir/Ocultar Objetos

Um pequeno exemplo de como utilizar Javascript para tornar os relatórios ReportStudio mais interessantes.

O exemplo cria uma área (tag DIV)  que será exibida quando o usuário clicar em um determinado link.

Para isto, criei um relatório e inseri 4 HTML Item na página, conforme a figura:

O primeiro HTML Item com a descrição “Função Javascript” contém o código da função que é executada ao se clicar no link.

<script language=”JavaScript”>

var var_ExibeFiltros = 0;

function ExibirFiltros(){

  if (var_ExibeFiltros == 1){
    var_ExibeFiltros = 0;
    document.getElementById(‘linkExibir’).innerHTML=”Exibir Filtros”;
    document.getElementById(‘divPrompt’).style.display=”none”;
  } else {
    var_ExibeFiltros = 1;
    document.getElementById(‘linkExibir’).innerHTML=”Ocultar Filtros”;
    document.getElementById(‘divPrompt’).style.display=””;
  }

}
</script>

O segundo HTML Item contém o link que executa a função acima:

<a href=”JavaScript:ExibirFiltros()” border=”1″ id=”linkExibir”>Exibir Filtros</a>

O terceiro HTML Item abre o DIV. É importante notar o valor da propriedade “id”, pois é através dele que o browser localiza o elemento a ser alterado.

<div id=”divPrompt” style=”display:none”>

Após este DIV, deve ser colocado o conteúdo que se quer ocultar. No exemplo eu coloquei somente um Text Item, mas pode ser qualquer coisa, como um List, um Gráfico, etc… Após isto, o último DIV fecha a área:

</DIV>

O resultado é este:

Após clicar no “Exibir Filtros”:

Quanto a ordem dos elementos na página, o “Função Javascript” deve ser colocado antes do “Link Ocultar/Exibir”, pois este último depende do primeiro.

É isto.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: