Ti Vídeo Tutoriais: javaScript: Layout para IDE

terça-feira, 5 de janeiro de 2016

javaScript: Layout para IDE

Dando continuidade ao desenvolvimento de uma IDE para javaScript precisaremos de um Layout.
Anteção! Exclua os <br /> do codigo para funcionar corretamente.

<br />
<script>
function visibleProperties() 
{
 var e = document.getElementById("properties");
 var te = document.getElementById("title_properties");
 if(e.style.display == 'none')
 {
  e.style.display = 'block';
  te.style.display = 'block';
 }
 else
 {
  e.style.display = 'none';
  te.style.display = 'none';
 }
}

function visibleCamadas() 
{
 var e = document.getElementById("camadas");
 if(e.style.display == 'none')
 {
  e.style.display = 'inline-block';
 }
 else
 {
  e.style.display = 'none';
 }
}

function visibleCenario() 
{
 var table_cenario = document.getElementById("table_cenario");
 var table_codigo  = document.getElementById("table_codigo");

function visibleCodigo() 
{
 var table_cenario = document.getElementById("table_cenario");
 var table_codigo  = document.getElementById("table_codigo");

</script><br />
<body style="margin:1px 1px 1px 1px;"><br />
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>   <td colspan="3" style="background-color:#ddeeff;"><br />
<br />
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td height="10" style="bottom:0px; background-color:#ddeeff; border:1px solid #aabbcc;"><br />
<br />
Camadas<div onclick="visibleCamadas()" style="width:10px; height:10px; float: right; color:#ffffff; background-color:#ffaaaa; margin:3px 3px 3px 3px; border:1px solid #000000;">
</div>
<br />
</td></tr>
<tr><td id="table_codigo" style="height:0%; background-color:#ddeeff;padding:2px 2px 2px 0px;"><br />
<br />
<div id="camadas" style="width:100%; height:200px; background-color:#ffffff; display:inline-block; bottom:0px; border:1px solid #aabbcc; " >
    </div>
<br />
</td></tr>
</table>
</td>  </tr>
<tr>   <td height="100%"><br />
<table width="100%" height="100%" border="0" cellspacing="1" cellpadding="0">
<tr>    <td  style="bottom:0px; background-color:#ddeeff;border:1px solid #aabbcc;">  <br />
<div id="title_elements" style="float:left;">
Elementos</div>
<div onclick="visibleElements()" style="width:10px; height:10px; float:right; color:#ffffff; background-color:#ffaaaa; margin:3px 3px 3px 3px; border:1px solid #000000;">
</div>
</td></tr>
<tr><td height="100%" style="background-color:#ddeeff;padding:2px 2px 0px 0px;"><br />
<div id="elements" style="width:100%;  height:100%; background-color:#ffffff; bottom:0px; border:1px solid #aabbcc; " >
   __________________</div>
</td></tr>
</table>
</td>        <td height="100%" width="100%" style="bottom:0px;"><br />
<table width="100%" height="100%" border="0" cellspacing="1" cellpadding="0">
<tr><td height="10" style="bottom:0px; background-color:#ddeeff; border:1px solid #aabbcc; margin:0px 0px 0px 0px;"><br />
Cenário<div onclick="visibleCenario()" style="width:10px; height:10px; float: right; color:#ffffff; background-color:#ffaaaa; margin:3px 3px 3px 3px; border:1px solid #000000;">
</div>
</td></tr>
<tr><td id="table_cenario" style="height:0%; background-color:#ddeeff; padding:0px 2px 0px 0px;"><br />
<div id="cenario" style="width:100%; height:100%;  background-color:#ffffff; display:none; bottom:0px; border:1px solid #aabbcc; " >
    </div>
</td></tr>
<tr><td height="10" style="bottom:0px; background-color:#ddeeff; border:1px solid #aabbcc;"><br />
Código<div onclick="visibleCodigo()" style="width:10px; height:10px; float: right; color:#ffffff; background-color:#ffaaaa; margin:3px 3px 3px 3px; border:1px solid #000000;">
</div>
</td></tr>
<tr><td id="table_codigo" style="height:100%; background-color:#ddeeff; padding:0px 2px 0px 0px;"><br />
<div id="codigo" style="display:inline-block; width:100%; height:100%; background-color:#ffffff; bottom:0px; border:1px solid #aabbcc; " >
    </div>
</td></tr>
</table>
</td>       <td height="100%" style="bottom:0px;"><br />
<table width="100%" height="100%" border="0" cellspacing="1" cellpadding="0">
<tr>    <td  style="bottom:0px; background-color:#ddeeff;border:1px solid #aabbcc;">  <br />
<div id="title_properties" style="float:left;">
Propriedades</div>
<div onclick="visibleProperties()" style="width:10px; height:10px; float:right; color:#ffffff; background-color:#ffaaaa; margin:3px 3px 3px 3px; border:1px solid #000000;">
</div>
</td></tr>
<tr><td height="100%" style="background-color:#ddeeff;padding:2px 2px 0px 0px;"><br />
<div id="properties" style="width:100%;  height:100%; background-color:#ffffff; bottom:0px; border:1px solid #aabbcc; " >
   __________________</div>
</td></tr>
</table>
</td>  </tr>
</table>
</body><br />
<br />
<br />

Nenhum comentário:

Postar um comentário