Efeito de Remoção com Jquery - Parte 1
Acredito que todos já tenham visto por ai o efeito de deletar alguma coisa e o item sumir na hora da lista, esse efeito que pode ser encontrado em muitos sites famosos por ai é facilmente feito com o Jquery.
A Primeira coisa a fazer é montar um simples html pra comportar a nossa listagem de itens a serem excluídos.
Nesse código temos algumas peculiaridades, 3 marcações que vão ajudar nosso código Jquery a identificar qual o item a remover, então definimos um id para a Div do item e um Id para o link remover. Fique atento pois os ids não podem se repetir por isso uso a palavra item seguido de um numero para identificar cada um dos itens, uso o mesmo numero no id do link porem com a palavra del, assim os ids não se repetem.
No link de remoção vamos utilizar a classe delete, ela vai chamar a nossa ação de remover o item quando clicado, como a classe pode se repetir podemos utilizar a mesma em todos os botões e com somente uma chamada fazer a nossa ação.
O Próximo passo é definir o CSS para a nossa listagem, criei um container pra guardar a listagem e para ser melhor visualizado em nosso exemplo.
/*CSS DA LISTA*/
#lista-container { width:700px; border:1px solid #ccc; }
.item { padding:5px 10px 5px 10px; min-height:65px; border-bottom:1px solid #ccc; cursor:pointer; }
.item:hover { background-color: #FFC; }
a.item-titulo { font-weight:bold; font-size:12px; text-decoration:none; }
a.item-titulo:hover { text-decoration:underline; color:#900; }
p.item-conteudo { font-size:10px; line-height:17px; padding-bottom:0; }
#itens { height:300px; overflow: auto; }
Agora vamos criar o nosso Jquery para fazer tudo isso funcionar. Primeiro iniciamos a nossa função e definimos a classe .delete com o evento click que vai fazer com que a função seja chamada assim que clicarmos no nosso link remover. Depois criamos a variável id que vai receber o número do item a ser excluido, com o código Javascript this.id.replace fazemos com que seja removido a parte do texto del- e sobre somente o número do id.
$j(".delete").click(function() {
var id = this.id.replace('del-', "");
$j("#item-"+id).fadeOut('slow', function(){ $j(this).remove(); });
});
Vamos agora criar a nossa função para que o item seja removido, para dar um efeito legal utilizaremos o fadeout do Jquery, perceba que utilizei neste caso uma função no efeito isto vai fazer com que o Jquery espere ate o final do fadeout para então executar a função remove que irá efetivamente retirar o item da lista.
Na próxima parte vamos adicionar a nossa lista um confirmação da remoção e também vou demonstrar como você pode postar os dados do item a ser removido para um arquivo PHP, receber a resposta e ai sim remover o item da lista.