index.htm 4.92 KB
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body
{overflow:hidden;}
div
{text-align:left;border: 0px solid #FFFFFF;font-family: Verdana, Arial, Helvetica, sans-serif;position:relative;display:block;font-size:10px;padding:0px;font-weight:normal;left:10px;}
#fundo
{background-color:rgb(245,245,245);overflow:hidden;position:absolute;top:0px;left:0px;}
.guias
{background-color:rgb(245,245,245);cursor:pointer;position:relative;text-align: left;top:8px;left:8px;padding:0px;margin:0px;}
.guia
{display:inline;background-color:rgb(230,230,230);color:rgb(150,150,150);position:relative;left:0px;top:0px;border: 0px solid white;font-size: 12px;z-index:1050;padding:0;margin-right:3px;border-left:1px solid rgb(230,230,230);border-top:1px solid rgb(230,230,230);border-right:1px solid rgb(230,230,230);}
#guia1
{background-color:rgb(255,255,255);color:orange;}
.guiaobj
{text-align:left;text-decoration:none;border: 0px solid #ffffff;font-family: Verdana, Arial, Helvetica, sans-serif;position:relative;display:block;font-size:8px;padding:1;font-weight:normal;top:0px;width:95%;}
#geral
{position:relative;background-color:white;text-align:center;text-decoration:none;border: 1px solid rgb(230,230,230);font-family: Verdana, Arial, Helvetica, sans-serif;display:block;font-size:8px;padding:0;font-weight:normal;top:8px;left:8px;overflow:auto;}
</style>
<title></title>
</head>
<body class="yui-skin-sam">
<div id=fundo >
	<div class="guias" id="guias">
		<div class=guia id=guia1 >&nbsp;Todos os registros&nbsp;</div>
		<div class=guia id=guia2 >&nbsp;Selecionados&nbsp;</div>
		<div class=guia id=guia3 >&nbsp;Opera&ccedil;&otilde;es&nbsp;</div>
		<div class=guia id=guia4 style="display:none">&nbsp;Gr&aacute;ficos&nbsp;</div>
</div>
	<div id=geral >
		<div id=guia1obj>
			<div style="text-align:center;position:relative;top:5px;left:0px">
				Guia tal
			</div>
		</div>
		<div id=guia2obj style="display:none">
			<div style="display:inline;position:absolute;top:5px;left:0px">
				guia fulana de tal
			</div>
		</div>
		<div id=guia3obj style="display:none">
			<div style="position:relative;top:5px;left:0px;width:90%" >
				Para que as opera&ccedil;&otilde;es atuem apenas sobre os elementos selecionados,
				ative a sele&ccedil;&atilde;o no mapa, para isso utilize, na guia "selecionados"
				a op&ccedil;&atilde;o "Ativa a sele&ccedil;&atilde;o"
			</div>
 		</div>
		<div id=guia4obj style="display:none">
			<div style="top:5px;left:5px;display:block;width:90%" id='resultado' >
			vazio
			</div>
		</div>

	</div>
</div>
<script type="text/javascript">
//eventos das guias
document.getElementById("guia1").onclick = function()
{document.getElementById("guia1obj").style.display="block";};
document.getElementById("guia2").onclick = function()
{document.getElementById("guia2obj").style.display="block";};
document.getElementById("guia3").onclick = function()
{document.getElementById("guia3obj").style.display="block";};
document.getElementById("guia4").onclick = function()
{document.getElementById("guia4obj").style.display="block";};
navm = false; // IE
navn = false; // netscape
var i, j, app = navigator.appName.substring(0,1);
if (app=='N') navn=true; else navm=true;
//verifica se existem guias
reduzAltura = 30;
for (i=0;i<7;i++){
	if (document.getElementById("guia"+i))
	{reduzAltura = 50;}
}
h = 500; //altura do corpo geral da guia
if (navn)
{
	document.getElementById("fundo").style.width = document.body.offsetWidth + 20;
	document.getElementById("fundo").style.height = h;
	document.getElementById("geral").style.height = h - reduzAltura;
	document.getElementById("geral").style.width = document.body.offsetWidth-2;
}
else
{
	//document.body.style.overflow="hidden";
	document.getElementById("fundo").style.width = document.body.offsetWidth;
	document.getElementById("fundo").style.height = h;
	document.getElementById("geral").style.height = h - reduzAltura;
	document.getElementById("geral").style.width = document.body.offsetWidth - 19;
}
for (i=0;i<7;i++)
{
	if (document.getElementById("guia"+i))
	{
		document.getElementById("guia"+i).onmousedown = function()
		{
			for (j=0;j<7;j++)
			{
				if (document.getElementById("guia"+j))
				{
					document.getElementById("guia"+j).style.backgroundColor="rgb(230,230,230)";
					document.getElementById("guia"+j+"obj").style.display="none";
					document.getElementById("guia"+j).style.color="rgb(150,150,150)";
					document.getElementById("guia"+j).style.textDecoration="none";
				}
			}
			this.style.color="orange";
			this.style.backgroundColor="rgb(255,255,255)";
			//this.style.textDecoration="underline"
		};
		document.getElementById("guia"+i).onmouseover = function()
		{this.style.borderTop="2px solid orange";};
		document.getElementById("guia"+i).onmouseout = function()
		{this.style.borderTop="1px solid rgb(230,230,230)";};
	}
}

</script>
</body>
</html>