Bom, não sei se aqui é a área correta para postagem de tutorial, se não for, peço que algum moderador mova para a área correta...
Vou mostrar como utilizar jQuery para exibir/ocultar elementos em uma página...
JQuery é um framework que visa facilitar a programação em javascript, tornando o código mais simples, flexível e infinitamente mais elegante. Além de ser bem leve, a jQuery conta ainda com um vasto arsenal de plugins para as mais diferentes tarefas...
usar o jQuery é muito simples..
a sintaxe básica de selecionar algum elemento é:
$("seletor").atributo("valor");
exemplo, aplicar negrito a todos os parágrafos
$("p").css("font-weight", "bold");
e ainda podemos usar o atributo class e id para referenciar os elementeos...
exemplo:
atributo class
seleciono o paragrafo com a class "primeiro"
$("p.primeiro").css("font-weight", "bold");
seleciono o paragrafo com o id "ultimo"
$("p#ultimo").css("font-weight", "bold");
mais sobre o seletores aqui
Bom, vamos agora ao que interessa, fazer o famoso show/hide (exibir/ocultar) divs...
Primeiramente, visite o site da jQuery e baixe a jQuery
1º exemplo, exibir um elemento oculto.
crie o seguinte xhtml:
<!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>
explicação
<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>
podemos ainda usar um efeito "fade" na exibição, por 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:
Pergunta
cassianooliver
Bom, não sei se aqui é a área correta para postagem de tutorial, se não for, peço que algum moderador mova para a área correta...
Vou mostrar como utilizar jQuery para exibir/ocultar elementos em uma página...
JQuery é um framework que visa facilitar a programação em javascript, tornando o código mais simples, flexível e infinitamente mais elegante. Além de ser bem leve, a jQuery conta ainda com um vasto arsenal de plugins para as mais diferentes tarefas...
usar o jQuery é muito simples..
a sintaxe básica de selecionar algum elemento é:
exemplo, aplicar negrito a todos os parágrafos e ainda podemos usar o atributo class e id para referenciar os elementeos... exemplo: atributo class seleciono o paragrafo com a class "primeiro" seleciono o paragrafo com o id "ultimo" mais sobre o seletores aqui Bom, vamos agora ao que interessa, fazer o famoso show/hide (exibir/ocultar) divs... Primeiramente, visite o site da jQuery e baixe a jQuery 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...
Veja aqui o exemplo online
Referências:
jQuery.com
Documentação jQuery
Eventos jQuery
http://docs.jquery.com/Effects
abraços!
Link para o comentário
Compartilhar em outros sites
6 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.