Download as
Browse Code »

Commit ea36342f1d8e9d64eaff80437271aa4eb93aaefc

Authored by Edmar Moretti
1 parent cc2fd9d7
Exists in master and in 7 other branches composer, doc-root, docker, guia, licenca, readme, unmaintened

Adicionado exemplo sobre configuração das abas

Showing 1 changed file with 231 additions and 0 deletions   Show diff stats
exemplos/abas.htm 0 → 100644
  Diff comments   View file @ea36342
... ... @@ -0,0 +1,231 @@
  1 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 +<html>
  3 +<head>
  4 +<meta http-equiv="Category" content="I3Geo Mapa interativo MMA geoprocessamento sig mobile">
  5 +<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
  6 +<title>i3Geo - Mapa interativo</title>
  7 +<script type="text/javascript" src="../classesjs/i3geo.js"></script>
  8 +</head>
  9 +<!-- Neste exemplo, a aba legenda será retirada e será criada uma nova aba -->
  10 +<body id="i3geo" >
  11 +<center>
  12 +<table id='mst' summary="" style='display:none' width=100% cellspacing='0'>
  13 +<tr style="border:0px">
  14 + <td colspan=2 style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td>
  15 +</tr>
  16 +<tr>
  17 +<td>
  18 + <table width=100% cellspacing=0 cellpadding=0 >
  19 + <tr>
  20 + <td title="libera guias" class=tdclaro id=encolheFerramentas style="vertical-align:top;width:5px;text-align:left;"></td>
  21 + <td>
  22 + <div class=verdeescuro style="top:0px;cursor:pointer;">
  23 + <div id=guia1 class=guia >Temas</div>
  24 + <div id=guia2 class=guia >Adiciona</div>
  25 +<!-- comentando a linha abaixo, a guia Legenda não será mostrada no mapa
  26 + <div id=guia4 class=guia >Legenda</div>
  27 +-->
  28 +<!-- Aqui é definida a nova aba. Ela deve ter um id entre 6 e 10 -->
  29 + <div id=guia6 class=guia >Nova aba</div>
  30 + <div id=guia5 class=guia >Mapas</div>
  31 + </div>
  32 + </td>
  33 + </tr>
  34 + </table>
  35 +</td>
  36 +<td style="text-align:right;height:0px;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)">
  37 + <div id="menus" ></div>
  38 +</td>
  39 +</tr>
  40 +<tr>
  41 + <td class=tdbranca id=contemFerramentas style="vertical-align:top;width:268px;text-align:left;">
  42 + <div id='guia1obj' >
  43 + <div style='left:5px;top:10px;' id=buscaRapida ></div>
  44 + <div id=listaPropriedades style='top:15px;' ></div>
  45 + <div id=listaTemas style='top:15px;'></div>
  46 + </div>
  47 + <div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
  48 +<!-- Opcionalmente, comente essa linha também para não incluir os dados da legenda
  49 + <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
  50 +-->
  51 +<!-- aqui deve-se incluir o que será mostrado quando a guia 6 for ativada. O id deve ser definido utilizando-se 'obj' após o nome do id da guia -->
  52 + <div id='guia6obj' style=text-align:left;font-size:12px >
  53 + <p style=text-align:left >Esta é uma nova guia</p>
  54 + <p style=text-align:left >Abaixo estão alguns exemplos de operações</p><br>
  55 + <p style=text-align:left ><input style=cursor:pointer type=button value="redesenhar" onclick="remapaf()" /></p>
  56 + <br><div style=text-align:left id=resultadoExemplo ></div>
  57 + </div>
  58 + <div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div>
  59 + </td>
  60 + <td style="vertical-align:top;border-width:0px;">
  61 + <table width="100%" style="vertical-align:top;border-width:0px">
  62 + <tr><td class=verdeclaro id=contemImg >
  63 + <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');"></div>
  64 + </td></tr>
  65 + </table>
  66 + </td>
  67 + </tr>
  68 +<tr>
  69 + <td class=tdbranca >
  70 + <div id=visual ></div>
  71 + <div id=tempoRedesenho style=color:green;background-color:black;width:50px;display:none ></div>
  72 + </td>
  73 + <td class=tdbranca >
  74 + <table width=100% ><tr>
  75 + <td class=tdbranca ><div id=lugarquadros ></div></td>
  76 + <td class=tdbranca style=text-align:center >
  77 + <div id=localizarxy >
  78 + Aguarde...
  79 + </div>
  80 + </td>
  81 + <td class=tdbranca ><div id=escala ></div></td>
  82 + <td class=tdbranca ><div id=ondeestou ></div></td>
  83 + </tr>
  84 + <tr><td></td><td class="tdbranca"><div style="text-align:left;font-size:10px;background-color:white;display:none;" id=mostraUTM ></div></td><td></td></tr>
  85 + </table>
  86 + </td>
  87 +</tr>
  88 +<tr style="border:0px"><td colspan=3 style="background-image:url('../imagens/visual/default/rodape.png');height:10px"></td></tr>
  89 +<tr style="border:0px"><td colspan=3 style=background-color:black ><input style="border:0px none; background-color:black;color:white;font-size:12pt;" type="text" size="1" id=bannerMensagem ></td></tr>
  90 +<tr style="border:0px"><td colspan=3 style=background-color:black;color:white >geoprocessamento@mma.gov.br</td></tr>
  91 +</table>
  92 +</center>
  93 +<div id=barraDeBotoes1 style='display:none'>
  94 + <table style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><div ID='historicozoom' ></div></td></tr></table>
  95 + <table title="zoom" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="zoom" alt="" src="../imagens/branco.gif" id='zoomli'/></td></tr></table>
  96 + <table title="desloca" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="desloca" alt="" src="../imagens/branco.gif" ID='pan'/></td></tr></table>
  97 + <table title="info" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="info" alt="" src="../imagens/branco.gif" id='identifica'/></td></tr></table>
  98 + <table title="geral" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="geral" alt="" src="../imagens/branco.gif" ID='zoomtot'/></td></tr></table>
  99 + <table title="mede" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="mede" alt="" src="../imagens/branco.gif" id='mede'/></td></tr></table>
  100 + <table title="area" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="area" alt="" src="../imagens/branco.gif" id='area'/></td></tr></table>
  101 +</div>
  102 +<div id=barraDeBotoes2 style='display:none'>
  103 + <table style="width:100%"><caption style="text-align:center">&nbsp;</caption>
  104 + <tr><td style='background-color:rgb(250,250,250);'><img title="" alt="" src="../imagens/branco.gif" id='sobeferramentas'/></td></tr>
  105 + </table>
  106 + <div style='display:inline;background-color:rgb(250,250,250);'>
  107 + <p style='font-size:6px;'>&nbsp;</p>
  108 + <img title="imprimir" alt="" src="../imagens/branco.gif" id='imprimir'/>
  109 + </div>
  110 + <div style='display:inline;background-color:rgb(250,250,250);'>
  111 + <p style='font-size:6px;'>&nbsp;</p>
  112 + <img title="reinicia" alt="" src="../imagens/branco.gif" id='reinicia'/>
  113 + </div>
  114 + <div style='display:inline;background-color:rgb(250,250,250);'>
  115 + <p style='font-size:6px;'>&nbsp;</p>
  116 + <img title="extensao" alt="" src="../imagens/branco.gif" id='exten'/>
  117 + </div>
  118 + <div style='display:inline;background-color:rgb(250,250,250);'>
  119 + <p style='font-size:6px;'>&nbsp;</p>
  120 + <img title="referencia" alt="" src="../imagens/branco.gif" id='referencia'/>
  121 + </div>
  122 + <div style='display:inline;background-color:rgb(250,250,250);'>
  123 + <p style='font-size:6px;'>&nbsp;</p>
  124 + <img title="insere xy" alt="" src="../imagens/branco.gif" id='inserexy'/>
  125 + </div>
  126 + <div style='display:inline;background-color:rgb(250,250,250);'>
  127 + <p style='font-size:6px;'>&nbsp;</p>
  128 + <img title="texto" alt="" src="../imagens/branco.gif" id='textofid'/>
  129 + </div>
  130 + <div style='display:inline;background-color:rgb(250,250,250);'>
  131 + <p style='font-size:6px;'>&nbsp;</p>
  132 + <img title="selecao" alt="" src="../imagens/branco.gif" id='selecao'/>
  133 + </div>
  134 + <div style='display:inline;background-color:rgb(250,250,250);'>
  135 + <p style='font-size:6px;'>&nbsp;</p>
  136 + <img title="google" alt="" src="../imagens/branco.gif" id='google'/>
  137 + </div>
  138 + <div style='display:inline;background-color:rgb(250,250,250);'>
  139 + <p style='font-size:6px;'>&nbsp;</p>
  140 + <img title="insere grafico" alt="" src="../imagens/branco.gif" id='inseregrafico'/>
  141 + </div>
  142 + <div style='display:none;background-color:rgb(250,250,250);'>
  143 + <p style='font-size:6px;'>&nbsp;</p>
  144 + <img title="lente" alt="" src="../imagens/branco.gif" id='lentei'/>
  145 + </div>
  146 + <div style='display:none;background-color:rgb(250,250,250);'>
  147 + <p style='font-size:6px;'>&nbsp;</p>
  148 + <img title="scielo" alt="" src="../imagens/branco.gif" id='scielo'/>
  149 + </div>
  150 + <div style='display:none;background-color:rgb(250,250,250);'>
  151 + <p style='font-size:6px;'>&nbsp;</p>
  152 + <img title="confluencias" alt="" src="../imagens/branco.gif" id='confluence'/>
  153 + </div>
  154 + <div style='display:none;background-color:rgb(250,250,250);'>
  155 + <p style='font-size:6px;'>&nbsp;</p>
  156 + <img title="busca na wikipedia" alt="" src="../imagens/branco.gif" id='wiki'/>
  157 + </div>
  158 + <div style='display:none;background-color:rgb(250,250,250);'>
  159 + <p style='font-size:6px;'>&nbsp;</p>
  160 + <img title="3d" alt="" src="../imagens/branco.gif" id='v3d'/>
  161 + </div>
  162 + <div style='display:none;background-color:rgb(250,250,250);'>
  163 + <p style='font-size:6px;'>&nbsp;</p>
  164 + <img title="fotos" alt="" src="../imagens/branco.gif" id='buscafotos'/>
  165 + </div>
  166 + <table style="width:100%;"><tr><td style='background-color:rgb(250,250,250);'><p style='font-size:6px;'>&nbsp;</p><img title="" alt="" src="../imagens/branco.gif" id='desceferramentas'/></td></tr></table>
  167 +</div>
  168 +<script type="text/javascript">
  169 +/*
  170 +Title: Abas
  171 +
  172 +Exemplo de abertura do I3Geo com modificação nas abas
  173 +
  174 +O usuário pode digitar diretamente o html no navegador.
  175 +
  176 +File: i3geo/exemplos/abas.htm
  177 +
  178 +Exemplo:
  179 +
  180 +http://<host>/i3geo/exemplos/abas.htm
  181 +
  182 +*/
  183 +//
  184 +//esta função contém o código customizado desta interface
  185 +//
  186 +function minhaFuncao()
  187 +{
  188 + var retornoDoResultado = function(retorno)
  189 + {
  190 + $i("resultadoExemplo").innerHTML += "<br><br>"+retorno.data
  191 + }
  192 + //
  193 + //aqui alguns exemplos de chamada em ajax
  194 + //o objeto cpObj já está criado e pode ser reaproveitado
  195 + //
  196 +
  197 + //retorna uma string com código javascript
  198 + var p = g_locaplic+"/classesphp/mapa_controle.php?funcao=escalagrafica&g_sid="+g_sid;
  199 + cpObj.call(p,"retornaBarraEscala",retornoDoResultado);
  200 +
  201 + //retorna um objeto JSON
  202 + var p = g_locaplic+"/classesphp/mapa_controle.php?funcao=pegalistademenus&g_sid="+g_sid;
  203 + cpObj.call(p,"pegalistademenus",retornoDoResultado);
  204 +}
  205 +var g_locaplic = protocolo()+"://"+window.location.host+"/i3geo";
  206 +var g_localimg = protocolo()+"://"+window.location.host+"/i3geo/imagens";
  207 +var g_templateLegenda = "";
  208 +var g_mapaRefDisplay = "block";
  209 +var g_3dmap = "3dmap.map";
  210 +var objmapa = new Mapa();
  211 +var g_visual = "default";
  212 +var g_autoRedesenho = 0;
  213 +var g_tempo_aplicar = 4000;
  214 +objmapa.guiaTemas = "guia1";
  215 +objmapa.guiaMenu = "guia2";
  216 +objmapa.guiaLegenda = "guia4";
  217 +objmapa.guiaListaMapas = "guia5";
  218 +/*
  219 + Inicializa o mapa
  220 +*/
  221 +//
  222 +//aqui é definida a função que será executada após a inicialização do mapa
  223 +//
  224 +objmapa.finaliza = "minhaFuncao()";
  225 +
  226 +objmapa.inicializa();
  227 +if($i("escala") && objmapa.w < 500)
  228 +{$i("escala").style.display="none";}
  229 +</script>
  230 +</body>
  231 +</html>
0 232 \ No newline at end of file
... ...