Linux / PHP / Java / Designer

As melhores dicas estão aqui.

Criando um sistema que oculta e exibe div com, HTML, CSS e um pouco de Java Script.

| 0 comentários

Olá Galera aqui estou eu novamente...Depois do grande sucesso do Browser Shoot que foi lançado ontem, recebi alguns E-mail. Alguns Internautas gostaram do sistema de ocultar e exibir div com sinal de +/-.

Como por exemplo desta pagina:http://browsershoot.satellasoft.net/comentario/

 

 Hoje vou explicar e disponibilizar o código aqui, e em breve uma aula mais explicativa em: http://videotutorial.satellasoft.net pois publico primeiro minhas matérias em alguns Blog e depois no meu site.

Vamos lá???

Para isso você precisa de três imagens, um que sera o fundo, e as outras duas que terá o sinal de + e -.

Vamos usar estas,
Escolha uma IMG de fundo para sua barra de controle.
MAIS :http://anfutebol.com.br/img_pt/btMais.png
MENOS: http://anfutebol.com.br/img_pt/btMenos.png

Salve tudo na mesma pasta que o aplicativo.

Agora vamos ao HTML.

====================HTML===========================
index.html

<html>
	<head>
		<title> Produtos </title>
		<link rel="stylesheet" href="css.css" media="all"/>

		<script type="text/javascript" src="javascript.js"></script>
</head>

	<body>
		<div id="conteiner">
			<div id="controle"><a href="#" id="mostrar" onmousedown="mostrar('dive')">+</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" id="ocultar" onmousedown="ocultar('dive')">-</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lista de produtos.</div>
				<div id="dive">
					<p>
					<form method="post" action="send.php">
						<table border="1"  width="800px;">
							<tr>
								<td>&nbsp;NOME:</td>
								<td>&nbsp;<input type="text" value="Nome" onclick="this.value=''"></td>
							</tr>
							<tr>
								<td>&nbsp;E-MAIL:</td>
								<td>&nbsp;<input type="text" value="E-mail" onclick="this.value=''"></td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;<input class="submit" type="button" id="test" value="Enviar"></td>
							</tr>
						</table>
					</form>
					</p>
				</div><br/>

		</div>
	</body>

</html>
Agora vamos ao nosso css.
==================CSS===================
css.css
*{margin:0 auto; padding:0;}
body{
color:#000;
}

#conteiner{
width:850px;
height:auto;
min-height:500px;
background-color:#666;
}

#controle{
width:833px;
height:30px;
background-image:url('bg.jpg');
padding:7px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#dive{
background-color:#fff;
width:830px;
padding:5px;
display:none;
text-shadow:#000;
}
.submit {
background-image:url('back.jpg');
width:200px;
height:20px;
}
Por Ultimo nosso Java Script
===========JAVA-SCRIPT=================
javascript.js
function  mostrar(ID){
	document.getElementById(ID).style.display = "block";

}
function  ocultar(ID){
	document.getElementById(ID).style.display = "none";
	$("#dive").hide("slow");
}
=========FIM DO CÓDIGO============
Com isso você já tem um sistema de exibir e ocultar DIV funcionando, agora é só fazer suas alterações e usar onde quiser.
 Lembrando que tudo que estiver dentro da #dive será exibido e ocultado, e por padrão no css essa div começa ocultada(display:none;).
Qualquer duvida só deixar comentários.
Até a próxima..^^

 

 

 

 

 

Deixe uma resposta

Campos requeridos estão marcados *.