Criar uma lista utilizando jQuery. A tela terá um campo para o usuário digitar um item e um botão para ser adicionado à lista. Ao adicionar um item, iremos configurar um link para que o usuário possa excluir o item.
Tecnologia aplicada:
Estrutura de arquivo:
- lista.html => Arquivo principal do post que incorporará a biblioteca jQuery, apresentará o formulário de cadastro de itens na lista e apresentará a lista.
Desenvolvimento
Arquivo: lista.html
Nesse arquivo vamos incorporar a biblioteca jQuery para realizar as operações de inclusão e exclusão na lista. No formulário teremos um campo com ID "txtcampo" e um botão com ID "add". No head do arquivo vamos configurar o evento click do botão para que ele pegue o que foi digitado no campo e adicione como item na lista conforme código abaixo:
<script type="text/javascript">
$(document).ready(function(){ // configura eventos ao carregar a página
$("#add").click(function(){ //configura o evento click do botão de id="add"
var valor = $("#txtcampo").val(); //recebe o valor digitado no campo
if(valor.length > 0){ //verifica se o campo não esta vazio
$('#lista').append('<li><a href="#excluir" title="Excluir" onclick="excluir(this)">X</a> | '+valor+'</li>'); //adiciona o item na lista com um link para exclusão
$("#txtcampo").val(''); //limpa o campo texto
}
});
});
</script>
Feito isso, temos nosso evento que adicionará um item na lista. Agora vamos fazer o evento excluir que está sendo chamado no onclick do link que cada item. segue o codigo a ser adicionado antes de fechar o script (</script>) do código acima:
function excluir(obj){
if(confirm('Deseja excluir este item?')) // exibe mensagem confirmando a exclusão do item
$(obj).parent().remove(); //remove o item.
}
A função representada acima recebe o objeto que foi clicado como parâmetro. Se o usuário confirmar a exclusão do item, nós vamos navegar no documento com a função parent do jQuery.
Explicando um pouco mais sobre a navegação de objeto:
O arquivo HTML é um tipo de arquivo xml onde uma tag é considerado um nó e, esse nó, possui nós filhos e nó pai. Segue um exemplo:
<ul>
<li>
<a>
texto
</a>
</li>
</li>
Na representação acima, a tag <ul> é nó pai da tag <li> e, <li> é filho de <ul>. O mesmo acontece entre a tag <li> e <a>. <li> é pai de <a> e, <a>, é filho de <li>
Segue uma minitabela:
Nó Nó Pai Nó Filho
ul - li
li ul a
a li -
Voltando ao nosso cenário, o link que foi clicado (<a>) é filho da tag (<li>) que é o objeto que queremos excluir. Por isso utilizamos o parent(). Essa função faz com que apontamos para o nó pai do nó que está selecionado, nesse caso o link clicado. Em seguida utilizamos a função remove() que exclui o objeto da página.
Finalizando, o código da página completa deve ter ficado assim:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lista dinâmica.</title>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
var valor = $("#txtcampo").val(); //recebe o valor digitado no campo
if(valor.length > 0){ //verifica se o campo não esta vazio
$('#lista').append('<li><a href="#excluir" title="Excluir" onclick="excluir(this)">X</a> | '+valor+'</li>'); //adiciona o item na lista com um link para exclusão
$("#txtcampo").val(''); //limpa o campo texto
}
});
});
function excluir(obj){
if(confirm('Deseja excluir este item?'))
$(obj).parent().remove();
}
</script>
</head>
<body>
<input type="text" id="txtcampo"><input type="button" id="add" value="+">
<h3>Lista:</h3>
<ul id="lista"></ul>
</body>
</html>
Pronto!
Obrigado.
Até a próxima.
Nenhum comentário:
Postar um comentário