CSS+HTML:como carregar apenas parte da pagina?

10 de novembro de 2006 8 respostas

Ticianne 10 de novembro de 2006

Ola!

Estou contruindo uma pagina em html utilizando css para layout. Criei uma regiao no esquema do box model dentro desta caixa.

gostaria de que ao clicar em um link do menu, ele mostrasse apenas naquela regiao, como faço isso?

seria possivel atualizar apenas aquele pedaço da pagina? ou teria outra forma de fazer isso??

obrigada!!!

visualizem em ProCont

Eh a regiao da esquerda, gostaria que as informações sobre cada item do menu aparecessem ai…

8 Respostas

jaboot 10 de nov. de 2006

Faz com divs
Se você buscar informações do banco, sugiro o uso do Ajax, daí não tem refresh na página
Se forem páginas estáticas, faça com que cada clique mostre uma determinada div e deixe as outras escondidas

Ticianne 10 de nov. de 2006

são paginas estáticas sim.

gostei da tua ideia.

como posso fazer essa “configuração” para que ao clicar em cada aba esconda uma div e mostre outra??

julianostr 10 de nov. de 2006 1 like

Cada div é uma camada na página. Você pode ir jogando uma ao lado da outra, uma sobre a outra, fazer uma salada de macarrão…

Vou lhe passar um exemplo aqui que faz isso que você quer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<STYLE>
.abaOn {font-family:arial; font-size:14; background-color:#DDDDDD; cursor:pointer; border-right: 1px solid #999; border-left: 1px solid #999; border-top: 1px solid #999; font-weight:bold}
.abaOff {font-family:arial; font-size:14; background-color:#DDDDDD; cursor:pointer; border-right: 1px solid #999; border-left: 1px solid #999; border-top: 1px solid #999; border-bottom: 1px solid #999}
.abaNulo {background-color:#FFFFFF; border-right: 1px transparent #999; border-left: 1px transparent #999; border-top: 1px transparent #999; border-bottom: 1px solid #999}
.aba0 {background-color:#DDDDDD; border-bottom:''; font-weight:bold} 
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
  function Aba(pAba) {
	if (pAba == 0) {
		document.getElementById("Aba0").style.visibility = "visible";
		document.getElementById("Aba1").style.visibility = "hidden";
		document.getElementById("Aba2").style.visibility = "hidden";
		document.getElementById("TdAba0").className = "abaOn";
		document.getElementById("TdAba1").className = "abaOff";
		document.getElementById("TdAba2").className = "abaOff";
	}
	else 
	if (pAba == 1) {
		document.getElementById("Aba0").style.visibility = "hidden";
		document.getElementById("Aba1").style.visibility = "visible";
		document.getElementById("Aba2").style.visibility = "hidden";
		document.getElementById("TdAba0").className = "abaOff";
		document.getElementById("TdAba1").className = "abaOn";
		document.getElementById("TdAba2").className = "abaOff";
	}
	else
	if (pAba == 2) {
		document.getElementById("Aba0").style.visibility = "hidden";
		document.getElementById("Aba1").style.visibility = "hidden";
		document.getElementById("Aba2").style.visibility = "visible";
		document.getElementById("TdAba0").className = "abaOff";
		document.getElementById("TdAba1").className = "abaOff";
		document.getElementById("TdAba2").className = "abaOn";
	}
  }

//-->
</SCRIPT>

</HEAD>

<BODY onLoad="Aba(0)" >

<FORM METHOD=POST ACTION="">

<div style="height: 20px; width: 480px; left: 10px; top: 78px; visibility: visible; position:absolute; background-color:#DDDDDD">
<table border="0" cellspacing="0" width="700">
	<tr>
		<td id="TdAba0" align="center" width="25%" class="abaOn" onClick="Aba(0)" title="Cliente">
			&nbsp;Cliente&nbsp;
		</td>
		<td id="TdAba1" align="center" width="25%" class="abaOff" onClick="Aba(1)" title="Solicitação Serviço">
			&nbsp;Solicitação Serviço&nbsp;
		</td>
		<td id="TdAba2" align="center" width="20%" class="abaOff" onClick="Aba(2)" title="Procedimentos">
			&nbsp;Procedimentos&nbsp;
		</td>
		<td align="center" width="30%" class="abaNulo">
			&nbsp;
		</td>
	</tr>
</table>
</div>

<div id="Aba0" style="height: 500px; width: 700px; left: 10px; top: 100px; visibility: visible; position:absolute; background-color:#DDDDDD; border-right: 1px solid #999; border-left: 1px solid #999; border-bottom: 1px solid #999">
	<TABLE width="100%" border="0">
	<TR>
		<TD>&nbsp;</TD>
	</TR>
	<TR>
		<TD>Nome:</TD>
		<TD><input type="text" name="" size="30"></TD>
	</TR>
	<TR>
		<TD>Endereço:</TD>
		<TD><input type="text" name="" size="30"></TD>
	</TR>
	</TABLE>
</div>

<div id="Aba1" style="height: 500px; width: 700px; left: 10px; top: 100px; visibility: hidden; position:absolute; background-color:#DDDDDD; border-right: 1px solid #999; border-left: 1px solid #999; border-bottom: 1px solid #999">
	<TABLE width="100%" border="0">
	<TR>
		<TD>&nbsp;</TD>
	</TR>
	<TR>
		<TD>Tipo:</TD>
		<TD><input type="checkbox" name=""></TD>
	</TR>
	<TR>
		<TD>Endereço:</TD>
		<TD><input type="text" name="" size="30"></TD>
	</TR>
	</TABLE>
</div>

<div id="Aba2" style="height: 500px; width: 700px; left: 10px; top: 100px; visibility: hidden; position:absolute; background-color:#DDDDDD; border-right: 1px solid #999; border-left: 1px solid #999; border-bottom: 1px solid #999">
	<TABLE width="100%" border="0">
	<TR>
		<TD>&nbsp;</TD>
	</TR>
	<TR>
		<TD>Código:</TD>
		<TD><input type="text" name="" size="30"></TD>
	</TR>
	<TR>
		<TD>Descrição:</TD>
		<TD><input type="text" name="" size="30"></TD>
	</TR>
	</TABLE>
</div>

<br>

</FORM>

</BODY>
</HTML>

Ticianne 10 de nov. de 2006

eh exatamente o que quero fazer…

vou estudar esse codigo e ver como posso adaptar.

Muito Obrigada, Juliano !!

farribeiro 10 de nov. de 2006

balarini:
Faz com divs
Se você buscar informações do banco, sugiro o uso do Ajax, daí não tem refresh na página
Se forem páginas estáticas, faça com que cada clique mostre uma determinada div e deixe as outras escondidas

O que meu amigo cita é o famoso Tableless, mas recomendo você passar neste site para compreender melhor este esquema.

outros links
[list]http://www.tableless.com.br/web-standards-vs-tableless[/list]
[list]http://www.tableless.com.br/a-semantica-e-que-manda[/list]
[list]http://www.tableless.com.br/websemantica1_introducao[/list]

Espero ter ajudado

David 11 de nov. de 2006

Ticianne, você pode usar o prototype para simplificar a sua vida. Assim você precisaria apenas de algo como:

Element.show('id_do_elemento'); // mostra elemento 
Element.hide('id_do_elemento'); // esconde elemento 
Element.toggle('id_do_elemento'); // se estiver visível esconde, se estiver escondido mostra

Dê também uma olhada em http://script.aculo.us/ para ver outros exemplos com alguns efeitos interessantes.

rosemberg 17 de nov. de 2006

julianostr

Cara so me registrei no site para agradecer sua dica.

Vc. ta de parabens.

Valeu

jwcunha 8 de dez. de 2006

David:

Ticianne, você pode usar o prototype para simplificar a sua vida. Assim você precisaria apenas de algo como:
Element.show('id_do_elemento'); // mostra elemento 
Element.hide('id_do_elemento'); // esconde elemento 
Element.toggle('id_do_elemento'); // se estiver visível esconde, se estiver escondido mostra
Dê também uma olhada em http://script.aculo.us/ para ver outros exemplos com alguns efeitos interessantes.

Cara, valeu muito pela dica!!! T+

Criado 10 de novembro de 2006

Ultima resposta 8 de dez. de 2006

Respostas 8

Participantes 7

8 Respostas

Topicos relacionados