Limpe a página anterior e o CSS dela, mantendo apenas a div com a class ex1, e nela crie um formulário, que terá três inputs de texto, cada um dentro de um label, um textarea também dentro de um label, e dois botões comuns com os nomes selecionar e enviar, dentro de um mesmo label.
Coloque no CSS esse código:
.ex1 {
width: 460px;
padding: 20px;
background-color: #1e90ff;
margin: 0 auto;
text-align: center;
color: #fff;
}
label {
display: block;
margin: 10px 0;
padding: 10px;
background-color: #f8f8ff;
}
input, textarea {
padding: 5px;
width: 450px;
}
Coloque uma classe com o nome place nos inputs e um title neles, para criarmos um placeholder via JQuery.
O método each() pega o conteúdo do título e passa pro placeholder dos inputs, dessa forma:
$(function() {
$(".place").each(function() {
var place = $(this).attr("title");
var input = $(this);
input.val(place).css("background", "#fff").focus;
});
});
No caso acima, a variável place pegará o atributo selecionado do title, e a input pegará todos os dados do input, que serão setados pelo método val().
Mas o código ainda não está completo, para funcionar corretamente, devemos fazer assim:
$(function() {
$(".place").each(function() {
var place = $(this).attr("title");
var input = $(this);
input.val(place).css("color", "#888").focusin(function() {
input.css("color", "#000");
if(input.val() == place) {
input.val("");
}
}).focusout(function() {
if(input.val() == "") {
input.css("color", "#888");
input.val(place);
}
});
});
});
Agora, para verificar, use a tecla tab do teclado nos inputs.
Agora, usaremos a keypress(), que dispara um evento ao pressionarmos uma tecla. Para isso, coloque a classe key no textarea (pode ser colocada mais de uma classe separada por espaço, seria algo tipo class="place key"), e ele pegará o que digitarmos nele e jogará na div, esse é o código JQuery:
$(function() {
var ex = $(".ex1");
$(".key").keypress(function() {
ex.text($(this).val());
});
});
PS: Ele mostrará com uma tecla de atraso, já que são as teclas que disparam o evento, e não são todas as teclas que funcionam, como a Shift e a Ctrl. Nesse caso, substitua a keypress() por keydown().
Para pegar o evento do teclado em tempo real, mude para keyup(), dessa forma:
$(function() {
var ex = $(".ex1");
$(".key").keyup(function() {
ex.text($(this).val());
});
});
Utilizando o mesmo formulário e os outros dados da aula anterior, vamos limpar também o javascript que estamos trabalhando.
Coloque mais uma classe nos inputs e textarea chamadas ev1, ev2, ev3 e ev4, e no javascript, coloque esse código usando focus(), que fará o title dos inputs seja escrito na nossa div criada, ao focar neles:
$(function() {
var ex = $(".ex1");
$(".ev1").focus(function() {
ex.text($(this).attr("title"));
});
});
E podemos fazer com que ele automaticamente pule pro outro input, com o keyup(), ao escrever "pontocom", dessa forma
$(function() {
var ex = $(".ex1");
$(".ev1").focus(function() {
ex.text($(this).attr("title"));
}).keyup(function() {
if($(this).val() == "pontocom") {
$(".ev2").focus();
}
});
});
Para avisar quando saimos do campo (retiramos o foco), usamos o blur(), dessa forma:
$(function() {
var ex = $(".ex1");
$(".ev1").blur(function() {
ex.text("Saída do campo: " + $(this).attr("name"));
});
});
PS: Não esqueça de colocar os names em cada input e textarea.
Temos também o método change(), que ao mudar alguma coisa no campo, disparará um evento. Esse é o código:
$(function() {
var ex = $(".ex1");
$(".ev1").change(function() {
ex.text("Campo alterado: " + $(this).val());
});
});
Para criarmos um botão que selecione o texto do textarea, vá no botão selecionar, coloque a classe selec, e no textarea coloque a class ev4, e no javascript coloque esse código, no qual usamos o select() para isso:
$(function() {
$(".selec").click(function() {
$(".ev4").select();
$("form").submit(function() {
return false;
});
});
});
PS: No caso acima, o método submit() é pra bloquear o envio de formulário nesse botão.
Primeiro, como fizemos em outra aula, crie novamente a div com a class ex1 com o texto aguardando ação, mas faça os p escrito hide, show, toggle e o input text, com class ev1, ev2, ev3 e ev4, respectivamente. E com o mesmo CSS anterior (volte na aula Eventos de Mouse pra pegar).
No javascript, vamos trabalhar primeiro com o hide(), que fará o texto aguardando ação desaparecer ao clicar, dessa forma:
$(function() {
var ex = $(".ex1");
$(".ev1").click(function() {
ex.hide("slow");
});
});
Para ele aparecer, trabalhamos da mesma forma com o show(), assim:
$(function() {
var ex = $(".ex1");
$(".ev1").click(function() {
ex.hide("slow");
});
$(".ev2").click(function() {
ex.show("slow");
});
});
A função toggle() integra as duas acima, alternando entre as duas funções, dessa forma:
$(function() {
var ex = $(".ex1");
$(".ev1").click(function() {
ex.hide("slow");
});
$(".ev2").click(function() {
ex.show("slow");
});
$(".ev3").click(function() {
ex.toggle("slow");
});
});
PS: Podemos definir o tempo do hide(), do show() e do toggle() com slow, fast ou definir o tempo em milissegundos, sempre entre aspas.
Podemos também usar o efeito animate(), ficando algo assim, assim:
$(function() {
var ex = $(".ex1");
$(".ev1").click(function() {
ex.hide("slow");
});
$(".ev2").click(function() {
ex.show("slow");
});
$(".ev3").click(function() {
ex.toggle("slow");
});
$(".ev4").click(function() {
ex.animate({width: "-=50px", height: "+=250px"}, 2000);
});
});
Podemos usar o keyup() também, que pegará os dados que escrevermos no input, no caso, as palavras referentes as funções, assim:
$(function() {
var ex = $(".ex1");
$(".ev4").keyup(function() {
var texto = $(this).val();
if(texto == "hide") {
ex.hide("slow");
}
else if(texto == "show") {
ex.show("slow");
}
else if(texto == "toggle") {
ex.toggle("slow");
}
else if(texto == "animate") {
ex.animate({width: "-=50px", height: "+=250px"}, 2000);
}
});
});
No HTML, deixe só a div com class ex1, e crie um input do tipo button e nome botão com class ev1. No javascript coloque esse código:
$(function() {
var ex = $(".ex1");
var button = $(":input.ev1");
button.click(function() {
ex.fadeOut("slow");
});
});
O efeito acima, faz o texto desaparecer aos poucos, para ele aparecer novamente, podemos chamar outro evento integrado, assim:
$(function() {
var ex = $(".ex1");
var button = $(":input.ev1");
button.click(function() {
ex.fadeOut("slow");
}).dblclick(function() {
ex.fadeIn("slow");
});
});
Para trabalharmos com a opacidade do elemento, usaremos a função fadeTo(), junto com o número da opacidade, do 0 ao 1, dessa forma:
$(function() {
var ex = $(".ex1");
var button = $(":input.ev1");
button.click(function() {
ex.fadeTo("slow", 0.5);
});
});
Temos também o fadeToggle(), que alterna entre aparecer e desaparecer, dessa forma:
$(function() {
var ex = $(".ex1");
var button = $(":input.ev1");
button.click(function() {
ex.fadeToggle("slow");
});
});
Copie a div com os mesmos dados, só que com a classe ex2, e coloque no CSS a indicação dela também.
O efeito que queremos fazer, é o botão disparar um evento na div ex1, e depois de terminar esse, dispare na div ex2, para isso, fazemos assim:
$(function() {
var ex = $(".ex1");
var ex2 = $(".ex2");
var button = $(":input.ev1");
button.click(function() {
ex.fadeTo(3000, 0.6, function() {
ex2.fadeTo("slow", 0.3);
});
});
});