TADS:Desenvolvimento Web: codigos1102: mudanças entre as edições

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(Uma revisão intermediária pelo mesmo usuário não está sendo mostrada)
Linha 1: Linha 1:
Atencão, pois estes exemplos precisam que a biblioteca jQuery esteja na pasta dos exemplos.
Além disso, o primeiro exemplo precisa de uma imagem chamada "exemplo.jpg" esteja na mesma pasta do arquivo.
<syntaxhighlight lang="jquery">
<syntaxhighlight lang="jquery">
<html>
<html>
Linha 29: Linha 32:
</html>
</html>
   
   
</syntaxhighlight>
<syntaxhighlight lang="jquery">
<html>
<script src="jquery-1.11.3.min.js"></script>
<head>
<style>
#teste{
width: 100px;
height: 100px;
background: #FAA456;
position: absolute;
border: solid 1px black;
}
#teste2{
width: 100px;
height: 100px;
background: #A98765;
position: absolute;
border: solid 1px black;
}
</style>
<script>
$(document).ready(function(){
$("#botao").click(function(){
/*$("#teste").animate(
{
left: "250px",
opacity: "0.5",
width : "200px",
height: "200px",
borderWidth: "50px"
},
3000 );*/
/*$("#teste").animate({left: "250px"},1000);
$("#teste").animate({opacity: "0.5"},1000);
$("#teste").animate({width: "200px"},1000);
$("#teste").animate({height: "200px"},1000);*/
$("#teste").animate({left: "250px"}, 1000)
  .animate({opacity: "0.5"}, 1000)
  .fadeOut("slow")
  .fadeIn("slow");
$("#teste2").animate({left: "450px"},1000);
$("#teste2").animate({opacity: "0.3"},1000);
$("#teste2").animate({width: "50px"},1000);
$("#teste2").animate({height: "50px"},1000);
});
});
</script>
</head>
<body>
<input type="button" value="clicar" id="botao"><br>
<div id="teste"></div>
<div id="teste2"></div>
</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="jquery">
<html>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$("#botao1").click(function(){
});
});
</script>
<style>
div{
color: #FFFFFF;
background: #333333;
width: 50%;
margin: auto;
}
.titulo{
margin-top: 20px;
height: 40px;
}
.noticia{
display: none;
}
</style>
<script>
$(document).ready(function(){
  $("#titulo1").click(function(){
$(".noticia").slideUp("500");
  $("#noticia1").slideToggle("slow");
  });
  $("#titulo2").click(function(){
$(".noticia").slideUp("500");
  $("#noticia2").slideToggle("slow");
  });
  $("#titulo3").click(function(){
$(".noticia").slideUp("500");
  $("#noticia3").slideToggle("slow");
  });
});
</script>
<head></head>
<body>
<div id="titulo1" class="titulo">Alunos do TADS conseguem ganhar na maratona de programacão 2016</div>
<div id="noticia1" class="noticia">Os alunos do segundo semestre do curso TADS conseguiram uma proeza fascinante. Um dos professores fala sobre o assunto... "Olha, quando comecei a trabalhar com eles, achei que não iria dar em nada. Pessoal meio sem perspectiva de vida ou saúde. Muitos você via nos olhos que não deveria estar aqui. Mas hoje eu vejo que estava enganado, e todos são muito inteligentes e tem habilidades únicas, pena que na maioria das vezes usado para o mal"</div>
<div id="titulo2" class="titulo">Nova dupla Wesley Safadão e Joelma quebram a internet com o novo hit do verão</div>
<div id="noticia2" class="noticia">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div>
<div id="titulo3" class="titulo">Professor é expulso de parquinho por não deixar outras criancas usarem o escorregador</div>
<div id="noticia3" class="noticia">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div>
</body>
</html>
</syntaxhighlight>
</syntaxhighlight>

Edição atual tal como às 17h25min de 13 de fevereiro de 2016

Atencão, pois estes exemplos precisam que a biblioteca jQuery esteja na pasta dos exemplos. Além disso, o primeiro exemplo precisa de uma imagem chamada "exemplo.jpg" esteja na mesma pasta do arquivo. 

<html>
   <script src="jquery-1.11.3.min.js"></script>
   <script>
      $(document).ready(function(){
         $("#botao1").click(function(){
            //$("#imagem").hide(); 
            //$("#imagem").fadeOut(2000);
            //$("#imagem")fadeToggle(1000);
            $("#imagem").fadeTo("slow", 0.33);
            /*$("#imagem").slideUp(1000, function(){
               alert("terminou de esconder");
            });*/
         });
         $("#botao2").click(function(){
            //$("#imagem").show(); 
            //$("#imagem").fadeIn(2000);
            $("#imagem").fadeTo("slow", 1);
            //$("#imagem").slideDown(1000)
         });
      });
   </script>
   <head></head>
   <body>
      <input type="button" value="clicar" id="botao1"><br>
      <input type="button" value="clicar2" id="botao2"><br>
      <img src="exemplo.jpg" id="imagem">
   </body>
</html>

<html>
	<script src="jquery-1.11.3.min.js"></script>
	<head>
		<style>
			#teste{
				width: 100px;
				height: 100px;
				background: #FAA456;
				position: absolute;
				border: solid 1px black;
			}

			#teste2{
				width: 100px;
				height: 100px;
				background: #A98765;
				position: absolute;
				border: solid 1px black;
			}
		</style>
		<script>
		$(document).ready(function(){
			$("#botao").click(function(){
				/*$("#teste").animate(
					{
						left: "250px",
						opacity: "0.5",
						width : "200px",
						height: "200px",
						borderWidth: "50px"
					}, 
					3000 );*/
				/*$("#teste").animate({left: "250px"},1000);
				$("#teste").animate({opacity: "0.5"},1000);
				$("#teste").animate({width: "200px"},1000);
				$("#teste").animate({height: "200px"},1000);*/

				$("#teste").animate({left: "250px"}, 1000)
						   .animate({opacity: "0.5"}, 1000)
						   .fadeOut("slow")
						   .fadeIn("slow");

				$("#teste2").animate({left: "450px"},1000);
				$("#teste2").animate({opacity: "0.3"},1000);
				$("#teste2").animate({width: "50px"},1000);
				$("#teste2").animate({height: "50px"},1000);
			});
			
		});
		</script>
	</head>
	<body>
		<input type="button" value="clicar" id="botao"><br>
		<div id="teste"></div>
		<div id="teste2"></div>

	</body>

</html>

<html>
	<script src="jquery-1.11.3.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#botao1").click(function(){
				
			});
			
		});
	</script>
	<style>
		div{
			color: #FFFFFF;
			background: #333333;
			width: 50%;
			margin: auto;
		}
		.titulo{
			margin-top: 20px;
			height: 40px;
		
		}
		.noticia{
			display: none;
		}
	</style>

	<script>
		$(document).ready(function(){
		   $("#titulo1").click(function(){
			$(".noticia").slideUp("500");
		   	$("#noticia1").slideToggle("slow");
		   });

		   $("#titulo2").click(function(){
			$(".noticia").slideUp("500");
		   	$("#noticia2").slideToggle("slow");
		   });

		   $("#titulo3").click(function(){
			$(".noticia").slideUp("500");
		   	$("#noticia3").slideToggle("slow");
		   });
		});
	</script>
	<head></head>
	<body>
		<div id="titulo1" class="titulo">Alunos do TADS conseguem ganhar na maratona de programacão 2016</div>
		<div id="noticia1" class="noticia">Os alunos do segundo semestre do curso TADS conseguiram uma proeza fascinante. Um dos professores fala sobre o assunto... "Olha, quando comecei a trabalhar com eles, achei que não iria dar em nada. Pessoal meio sem perspectiva de vida ou saúde. Muitos você via nos olhos que não deveria estar aqui. Mas hoje eu vejo que estava enganado, e todos são muito inteligentes e tem habilidades únicas, pena que na maioria das vezes usado para o mal"</div>
		<div id="titulo2" class="titulo">Nova dupla Wesley Safadão e Joelma quebram a internet com o novo hit do verão</div>
		<div id="noticia2" class="noticia">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div>
		<div id="titulo3" class="titulo">Professor é expulso de parquinho por não deixar outras criancas usarem o escorregador</div>
		<div id="noticia3" class="noticia">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div>

	</body>

</html>
Disponível em “http://wiki.foz.ifpr.edu.br/wiki/index.php?title=TADS:Desenvolvimento_Web:_codigos1102&oldid=11273”