Ir para conteúdo

Arquivado

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

cassiano óliver

Show/Hide com jQuery

Por , em Javascript

Recommended Posts

cassiano óliver    1

cassiano óliver
Postado

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:

<script type="text/javascript">
   $(document).ready(function() {
	   $("h1#mostra").click(function() {
		   $("div#oculto").fadeIn("fast");
	   });
   });
   </script>

Para ocultar, deveríamos criar um outro elemento (p, h3, etc)...

Exemplo:

<script type="text/javascript">
   $(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:

<script type="text/javascript">
   $(document).ready(function() {
	   $("h1#mostra").toggle(
		   function() {
			   $("div#oculto").fadeIn(); // ou slideDown()
		   },
		   function() {
			   $("div#oculto").fadeOut(); // ou slideUp()
		   }
	   );
   });
   </script>

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

ions    0

ions
Postado

isso funciona em radio button? tipo... qundo eu seleciono um radio button dai mostra algumas text areas novas...

funciona?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fall    0

Fall
Postado

Show de bola eu tb amo jquery tb curto mto o JSON e agora tb to estudando o EXT

 

show de bola parabens

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Designer    0

Carlos Designer
Postado

eu gosto de usar jquery, mas para fazer coisas simples acho que não compensa carregar uma biblioteca de centenas de linhas, é melhor fazer com javascript puro mesmo em poucas linhas.

 

uso jquery só para coisa complexas, tipo criar um lightbox, um calendário ou coisas do tipo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

cassiano óliver    1

cassiano óliver
Postado

isso funciona em radio button? tipo... qundo eu seleciono um radio button dai mostra algumas text areas novas...

funciona?

como eu faço isso com radio button ou radio group???

a lógica é a mesma, atribua um id ou class ao input e também ao textarea...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eliseu M.    2

Eliseu M.
Postado

Só complementando...

 

Toggle simples

$(document).ready(function(){
  $("#elemento").click(function(){
     $("#outroelemento").toggle();
  });
});

Toggle animado (vertical e horizontal)

$(document).ready(function(){
  $("#elemento").click(function(){
     $("#outroelemento").toggle("slow");
  });
});

slow é a velocidade. Opções: slow, medium, fast.

 

SlideToggle (vertical)

$(document).ready(function(){
  $("#elemento").click(function(){
     $("#outroelemento").toggle("slow");
  });
});

 

É isso :D Té mais!

Compartilhar este post

Link para o post
Compartilhar em outros sites

alagrafica    0

alagrafica
Postado

Achei seu blog através do google, procurando por jquery.

Seu blog é muito bacana e informativo.

 

Queria que você me ajudasse numa questão que deve ser

extremamente simples para você, mas que para mim já custou

dias de pesquisas e até hoje não encontrei a solução.

 

Estou criando esse site:

http://www.alexandre-oliveira.com/testes/oralgraf/

e no link "PRODUTOS" gostaria que fosse exatamente

igual ao link "VEJA TODOS OS 38 DEPARTAMENTOS",

do site "AMERICANAS.COM". Consegui chegar próximo

com jquery, mas quando eu tiro o mouse de cima do link

"PRODUTOS" a div some e eu preciso que ela se comporte

como no site da Americanas. Essa div não pode sumir

porque terá outros links e informações dentro dela.

 

Se você puder me ajudar ou dar alguma ideia eu ficaria

muito agradecido.

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

ericolvr    0

ericolvr
Postado

Muito legal seus tutorial, parabéns!

 

 

Então Klaygomes, esse e um código que uso, o que postou.

Meu problema é que são duas divs que estão ocultas, qdo abro a segunda ela se sobrepoe a primeira.

O que me traz probemas. Fica duas divs sobrepostas para esconde novamente, entende?

Compartilhar este post

Link para o post
Compartilhar em outros sites

samora.oliveira    2

samora.oliveira
Postado

Cassiano Óliver, boa tarde!

 

Códigos muito interessante! Parabéns! Testei aqui e funcinou normalmente!

 

Obrigado por disponibilizar este tutorial!

 

Att.

Samora Machel

Compartilhar este post

Link para o post
Compartilhar em outros sites

ma_gr    2

ma_gr
Postado

Pq meu elemento #mostra (.show-list no meu caso) está sumindo qdo a pagina carrega? É um menu normal:

 

	<div class="top-menu">
		<div class="login">
			<a href="#">Ouça</a>
            <a href="#">Eventos</a>
            <a href="#">Bandas</a>
            <a href="#" class="show-list">Divulgação</a>
            <a href="#">Parcerias</a>
			<a href="#">Escolas e Aulas Particulares</a>
			<a href="#">Login</a>
			<a href="#">Cadastre-se</a>
    	</div>
	</div>

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