Assine:
Show/hide - Exibir E Ocultar Elementos
Jquery
Escrito por CassianoOliver em JavaScript e Ajax. Data: 13/03/2008
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Tudo bem ae pessoal?
Hoje vou mostrar um tutorial simples explicando como fazer o famoso "show/hide" com jQuery.
Quem ainda não conhece, aqui o site oficial: http://docs.jquery.com/Main_Page
Faça o dowload, e inclua o jquery em sua página
1º exemplo, exibir um elemento oculto.
crie o seguinte xhtml:
explicação
podemos ainda usar um efeito "fade" na exibição, por exemplo:
Para ocultar, deveríamos criar um outro elemento (p, h3, etc)...
Exemplo:
Agora vamos fazer com que possamos usar o mesmo elemento (h1#mostrar) para exibir e ocultar o elemento oculto.
Para podermos adicionar mais de um evento "click" em um elemento, usamos o evento "toggle".
ficaria assim:
Bom, é isso, espero ter ajudado...
Referências:
jQuery.com
Documentação jQuery
Eventos jQuery
http://docs.jquery.com/Effects
abraços!
* Agora to no trabalho, depois coloco o exemplo aí online
Hoje vou mostrar um tutorial simples explicando como fazer o famoso "show/hide" com jQuery.
Quem ainda não conhece, aqui o site oficial: http://docs.jquery.com/Main_Page
Faça o dowload, e inclua o jquery em sua página
1º exemplo, exibir um elemento oculto.
crie o seguinte xhtml:
QUOTE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show/Hide com jQuery</title>
// Assim inserirmos o jquery.js em nossa página
<script type="text/javascript" src="jquery.js"></script>
// Aqui vem o script
<script type="text/javascript">
$(document).ready(function() {
$("h1#mostra").click(function() {
$("div#oculto").show();
});
});
</script>
<style type="text/css">
html {
font: 12px Arial, Helvetica, sans-serif;
text-align: center;
}
#conteudo, #oculto {
background: #e5e5e5;
width: 480px;
margin: auto;
padding: 10px;
border: solid 1px #ccc;
}
#conteudo h1 {
font-size: 15px;
}
#oculto {
display: none;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="conteudo">
// Aqui o elemento que exibe o elemento oculto
<h1 id="mostra">Clique aqui para exibir/ocultar um elemento</h1>
</div>
// aqui o elemento oculto
<div id="oculto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eleifend. Mauris tincidunt lectus in libero. Suspendisse interdum lectus vitae urna. Morbi vitae enim vel justo dapibus porttitor.
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show/Hide com jQuery</title>
// Assim inserirmos o jquery.js em nossa página
<script type="text/javascript" src="jquery.js"></script>
// Aqui vem o script
<script type="text/javascript">
$(document).ready(function() {
$("h1#mostra").click(function() {
$("div#oculto").show();
});
});
</script>
<style type="text/css">
html {
font: 12px Arial, Helvetica, sans-serif;
text-align: center;
}
#conteudo, #oculto {
background: #e5e5e5;
width: 480px;
margin: auto;
padding: 10px;
border: solid 1px #ccc;
}
#conteudo h1 {
font-size: 15px;
}
#oculto {
display: none;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="conteudo">
// Aqui o elemento que exibe o elemento oculto
<h1 id="mostra">Clique aqui para exibir/ocultar um elemento</h1>
</div>
// aqui o elemento oculto
<div id="oculto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eleifend. Mauris tincidunt lectus in libero. Suspendisse interdum lectus vitae urna. Morbi vitae enim vel justo dapibus porttitor.
</div>
</body>
</html>
explicação
CODE
<script type="text/javascript">
$(document).ready(function() {
// Adicionamos uma função de "click" ao h1 identificado como "mostra"
$("h1#mostra").click(function() {
// Quando clicado, exibirá a div identificada como "oculto"
$("div#oculto").show();
});
});
</script>
$(document).ready(function() {
// Adicionamos uma função de "click" ao h1 identificado como "mostra"
$("h1#mostra").click(function() {
// Quando clicado, exibirá a div identificada como "oculto"
$("div#oculto").show();
});
});
</script>
podemos ainda usar um efeito "fade" na exibição, por exemplo:
CODE
<script type="text/javascript">
$(document).ready(function() {
$("h1#mostra").click(function() {
$("div#oculto").fadeIn("fast");
});
});
</script>
$(document).ready(function() {
$("h1#mostra").click(function() {
$("div#oculto").fadeIn("fast");
});
});
</script>
Para ocultar, deveríamos criar um outro elemento (p, h3, etc)...
Exemplo:
CODE
<script type="text/javascript">
$(document).ready(function() {
$("h2#oculta").click(function() {
$("div#oculto").hide();
});
});
</script>
$(document).ready(function() {
$("h2#oculta").click(function() {
$("div#oculto").hide();
});
});
</script>
Agora vamos fazer com que possamos usar o mesmo elemento (h1#mostrar) para exibir e ocultar o elemento oculto.
Para podermos adicionar mais de um evento "click" em um elemento, usamos o evento "toggle".
ficaria assim:
CODE
<script type="text/javascript">
$(document).ready(function() {
$("h1#mostra").toggle(
function() {
$("div#oculto").fadeIn(); // ou slideDown()
},
function() {
$("div#oculto").fadeOut(); // ou slideUp()
}
);
});
</script>
$(document).ready(function() {
$("h1#mostra").toggle(
function() {
$("div#oculto").fadeIn(); // ou slideDown()
},
function() {
$("div#oculto").fadeOut(); // ou slideUp()
}
);
});
</script>
Bom, é isso, espero ter ajudado...
Referências:
jQuery.com
Documentação jQuery
Eventos jQuery
http://docs.jquery.com/Effects
abraços!
* Agora to no trabalho, depois coloco o exemplo aí online
Mais recentes em JavaScript e Ajax
- Background randomico
- Por JoneMulti - As vezes voce e pergunta "como é que aquele site...
- Abandone o getelementbyid
- Por Micox - “wtf mico? are you crazy?” - calma malucada, não estou...
- Funções javascript equivalentes a funções
- Por Micox - Php to javascript project: php.js...
- Select dinâmico de estados e cidades
- Por DGmike - Uma das dúvidas mais comuns para quem está começando...
- Selecionar dinâmicamente um option de um select
- Por Manito - Dica para quem fizer um form usando ajax...
Ver mais Artigos de JavaScript e Ajax.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
CassianoOliver disse:
Micox disse:
CassianoOliver disse:
CassianoOliver disse:
http://cassianodesigner.com/tutos/jQuery/ShowHide/
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).