Usando layers no TelEduc

Layers são carregadas com a página, mas recebem visibilidade: "Hidden", então não aparecem até que algum evento (onclick, em geral) o acione.

As Layers são intuitivas e agilizam o usuário, servem para viabilizar que pequenas modificações sejam feitas na página principal de cada ferramenta, acaba com a necessidade de uma outra página para alterações simples.

No arquivo layer.php temos um exemplo:

  /* Nova Pasta */
  echo("    <div id=\"novapasta\" class=popup>\n");
  echo("      <div class=\"posX\"><span onclick=\"EscondeLayer(cod_novapasta);return(false);\"><img src=\"../imgs/btClose.gif\" alt=\"Fechar\" border=\"0\" /></span></div>\n");
  echo("      <div class=int_popup>\n");
  echo("        <form name=form_novo_top method=post action='' onSubmit='return (VerificaNovoItemTopico(document.form_novo_top.novo_nome));'>\n");
  echo("          <div class=ulPopup>\n");    
  /* 24 - Digite o nome da pasta a ser criada aqui: */
  echo("            ".RetornaFraseDaLista($lista_frases,24)."<BR />\n");
  echo("            <input id=\"titulopasta\" class=\"input\" type=text name=\"novo_nome\" value=\"\" maxlength=\"150\" /><br />\n");
  /* 18 - Ok (gen) */
  echo("            <input type=\"submit\" id=\"ok_novapasta\" class=\"input\" value=\"".RetornaFraseDaLista($lista_frases_geral,18)."\" />\n");
  /* 2 - Cancelar (gen) */
  echo("            &nbsp; &nbsp; <input type=\"button\" class=\"input\"  onClick=\"EscondeLayer(cod_novapasta);\" value=\"".RetornaFraseDaLista($lista_frases_geral,2)."\" />\n");
  echo("          </div>\n");    
  echo("        </form>\n");
  echo("      </div>\n");
  echo("    </div>\n");

A função MostraLayer

  /* Exibe o layer especificado por cod_layer.                            */
  echo("      function MostraLayer(cod_layer)\n");
  echo("      {\n");
  echo("        EscondeLayers();\n");
  echo("        moveLayerTo(cod_layer, Xpos, Ypos + AjustePosMenuIE());\n");
  echo("        showLayer(cod_layer);\n");
  echo("      }\n\n");

Essa função abre a layer de código passado por parâmetro.
De início é fechada outra layer, caso esteja aberta.
A layer é posicionada corretamente, ajusta para diversas versões de browser.(Utiliza a DHTMLlib)
E depois disso a layer é mostrada, a visibilidade é alterada de hidden para visible(ou show).

Acionando a função

O botão que aciona a layer, chama a função MostraLayer em onclick.
Exemplo:

<a onclick="MostraLayer(layer_estrutura,this);return(false);" href="#">
<img border="0" src="../imgs/estrutura.gif"/>
</a>

O conteúdo/texto das layers é chamado diretamente do banco de dados pela função RetornaFraseDaLista.

Como criar uma Layer

Todas as ferramentas possuem no arquivo "ferramenta".php:

include("layer.php")

Primeiro é necessário criar a div(novadiv) da layer, no arquivo layer.php ou no próprio ferramenta.php onde será usado.

  /* Nova Pasta */
  echo("    <div id=\"novadiv\" class=popup>\n");
  /*Botão de fechar layer*/
  echo("      <div class=\"posX\"><span onclick=\"EscondeLayer(cod_novadiv);return(false);\"><img src=\"../imgs/btClose.gif\" alt=\"Fechar\" border=\"0\" /></span></div>\n");
  /* div da caixa externa */
  echo("      <div class=int_popup>\n");
  /* se for inserir um form, chamar a função da ação(Novafuncao) em onSubmit */
  echo("        <form name=form_novo_top method=post action='' onSubmit='return (novaFuncao(parametros));'>\n");
  /* div da caixa interna -> tamanho fixo de 185px, se quiser outro tamanho, criar uma div class de outro nome e inserir o novo valor em ambiente.css */
  echo("          <div class=ulPopup>\n");    
  /* x é o número da frase do banco de dados a ser mostrado */
  echo("            ".RetornaFraseDaLista($lista_frases,x)."<BR />\n");
  /* O input é criado sem novidades*/
  echo("            <input id=\"entrada1\" class=\"input\" type=text name=\"nova_entrada\" value=\"\" maxlength=\"150\" /><br />\n");
  /* O submit mostra a palavra gravada no banco de dados em y*/
  echo("            <input type=\"submit\" id=\"ok_entrada1\" class=\"input\" value=\"".RetornaFraseDaLista($lista_frases_geral,y)."\" />\n");
  /* Para cancelar, é o mesmo procedimento do botão de fechar layer */
  echo("            &nbsp; &nbsp; <input type=\"button\" class=\"input\"  onClick=\"EscondeLayer(cod_novapasta);\" value=\"".RetornaFraseDaLista($lista_frases_geral,2)."\" />\n");
  echo("          </div>\n");    
  echo("        </form>\n");
  echo("      </div>\n");
  echo("    </div>\n");

Essa layer será chamada em geral no arquivo "ferramenta".php por:

<a onclick="MostraLayer(novadiv);" href="#">
</a>

Cada página possui uma função Iniciar. Que é chamada em toda inicialização de página, ela disponibiliza, se existir, a layer específica de cada página.

  echo("  function Iniciar()\n");
  echo("  {\n");
  echo("    layer_novadiv = getLayer('novadiv');\n");
  /*if ($usr_formador)
  {
    if ($acao == "novaPergunta" && $cod_pergunta != NULL){
          echo("ExibirMensagem($cod_pergunta); AlteraTexto($cod_pergunta);");
      }
      echo("    layer_estrutura_mover = getLayer('layer_estrutura_mover');\n");
  }*/
  echo("        var atualizacao = '".$_GET['atualizacao']."';\n");
  $feedbackObject->returnFeedback($_GET['acao'], $_GET['atualizacao']);
  echo("  EscondeLayers();\n");
  echo("  }\n\n");

layer.png - Layer (51,454 KB) Richard Keller, 14/05/2009 15:23