Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

guigosnet

[Resolvido] [+] mostrar detalhes com efeito

Por , em Javascript

Recommended Posts

guigosnet    0

guigosnet
Postado

galera é o seguinte tenho um grid com um repeat, listando os dados.

so que queria fazer o aeguinte, quando clicar em uma linha do registro ele abrisse

um efeito, os mais dados....

exemplo

 

00001 CLIENTE TAL 01/01/09 67,90 [+] clica aqui e veja detalhes

00001 CLIENTE TAL 01/02/09 167,90 [+] clica aqui e veja detalhes

 

AO CLICAR NESTE SINAL DE [+], APLICASSE UM EFEITO PRA BAIXO, ABRINDO UM ESPAÇO LISTANDO

OS DADOS DE DETALHES, COMO FAÇO ISSO EM PHP + DREAM + MSYQL?

 

MAIS OU MENOS ASSIM:

 

00001 CLIENTE TAL 01/01/09 67,90 [+] clica aqui e veja detalhes [+]

00001 CLIENTE TAL 01/02/09 167,90 [+] clica aqui e veja detalhes [+]

| DETALHES TAL |

| DETALHES TAL TAL |

| DETALHES TAL TAL TAL...... |

|__________________________________________________________________

Compartilhar este post

Link para o post
Compartilhar em outros sites

~TiuTalk~    7

~TiuTalk~
Postado

Esse conteúdo adicional - normalmente - seria carregado antes e ficaria escondido... Para a exibição com efeito você vai precisar usar JavaScript, vou mover o tópico para o fórum correto.

 

Abraços!

 

----

 

Tópico Movido

PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

É como o Thiago Retondar e ~Tiu Talk~ mencionaram:

1. Carregue primeiramente os dados na página e jogue em um DIV;

2. Com os estados "none" e "block" para o estilo "display" você controla a visualização ou não dos dados.

 

Segue um script modelo:

<html>
<head>
<title></title>
<script type="text/javascript">
function mostrar(est,id) {
	objDiv = document.getElementById(id);
	objSpan = document.getElementById("link"+id);
	if (est == 1) {
		objDiv.style.display = "block";
		objSpan.innerHTML = '<a href="javascript:mostrar(0,\''+id+'\')">[-] Menos detalhes</a>';
	} else {
		objDiv.style.display = "none";
		objSpan.innerHTML = '<a href="javascript:mostrar(1,\''+id+'\')">[+] Mais detalhes</a>';
	}
}
</script>
</head>
<body>
00001 CLIENTE TAL 01/01/09 R$67,90 <span id="link00001"><a href="javascript:mostrar(1,'00001')">[+] Mais detalhes</a></span>
<div id="00001" style="display:none">
|02/01/2009 13:34h (Entrada) Valor: R$ 21,00
<br>|03/01/2009 07:21h (Entrada) Valor: R$ 214,00
<br>|04/01/2009 14:14h (Saída) Valor: R$ 15,80
</div>
<br>00002 CLIENTE TAL 01/02/09 167,90 <span id="link00002"><a href="javascript:mostrar(1,'00002')">[+] Mais detalhes</a></span>
<div id="00002" style="display:none">
|02/02/2009 13:34h (Entrada) Valor: R$ 121,00
<br>|03/02/2009 07:21h (Entrada) Valor: R$ 2214,00
<br>|04/02/2009 14:14h (Saída) Valor: R$ 415,80
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito