Jump to content

POWERED BY:

Archived

This topic is now archived and is closed to further replies.

cassiano óliver

Show/Hide com jQuery

By cassiano óliver, in Javascript

Recommended Posts

cassiano óliver    1

cassiano óliver
Posted

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!

Share this post

Link to post
Share on other sites

Fall    0

Fall
Posted

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

 

show de bola parabens

Share this post

Link to post
Share on other sites

Carlos Designer    0

Carlos Designer
Posted

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.

Share this post

Link to post
Share on other sites

cassiano óliver    1

cassiano óliver
Posted

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...

Share this post

Link to post
Share on other sites

Eliseu M.    2

Eliseu M.
Posted

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!

Share this post

Link to post
Share on other sites

alagrafica    0

alagrafica
Posted

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

Share this post

Link to post
Share on other sites

ericolvr    0

ericolvr
Posted

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?

Share this post

Link to post
Share on other sites

samora.oliveira    2

samora.oliveira
Posted

Cassiano Óliver, boa tarde!

 

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

 

Obrigado por disponibilizar este tutorial!

 

Att.

Samora Machel

Share this post

Link to post
Share on other sites

ma_gr    2

ma_gr
Posted

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>

Share this post

Link to post
Share on other sites
Go To Topic Listing Javascript
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept