É impressionante o que se pode fazer com o DOM, sinceramente me agrada muito desenvolver desta forma. Mas mãos a obra, inicialmente temos que falar das funções básicas que são utilizadas neste artigo:
Função que recupera um elemento pela id utilizando o dólar ($). Essencial e muito prática esta função já virou padrão no desenvolvimento JavaScript. Seu funcionamento é extremamente simples, ela recebe por parâmetro uma string e busca na página o elemento que possui a id recebida.
function $(elemento){
return document.getElementById(elemento);
}
Função para adicionar eventos a elementos da página. Caramba, como minha vida mudou depois desta função! Ela recebe por parâmetro o objeto que receberá o evento, o evento e a função. A função addEvent é crossBrowser, ou seja, ela pode ser utilizada tanto no IE quanto no FireFox. A primeira linha da função é para o firefox a segunda para o IE, resolvi utilizar a técnica de try{}catch(e){} entre os métodos de cada objeto por ficar mais elegante para tratar browsers diferentes. Uma observação que deve ser feita é de passar para a função quando chama-la o nome do evento sem o “on” na frente, por exemplo, o evento “onclick” deve ser passado somente como “click”.
function addEvent(obj, evType, fn){
try{obj.addEventListener(evType, fn, false);}catch(e){}
try{obj.attachEvent("on"+evType, fn);}catch(e){}
}
Função de remoção de elementos filhos. Embora muita gente por ai utilizar a propriedade innerHTML para realizar esta tarefa em alguns momentos, principalmente se tratando de IE, acaba-se tendo problemas com este atributo. Partindo deste principio criei esta função que remove cada node filho de um elemento passado por parâmetro.
function removerFilhos(param){
for(var i=0,elem;elem = param.childNodes[i];i++){
elem.parentNode.removeChild(elem);
}
}
Agora após esta introdução vamos começar a fazer o nosso título editável. Bem podemos ver os dois estados do nosso exemplo nas duas imagens abaixo, a primeira mostra um título estático e a segunda mostra o estado que vai ficar após receber um click.
Título após receber um click:
O código HTML é bem simples ele somente possui um título com a id “titulo”. Segue o código abaixo:
<html>
<head>
</head>
<body>
<h2 id="titulo" >Título Editável</h2>
</body>
</html>
Após fazer o código salve-o como titulo.htm.
Agora vamos para a função responsável por realizar a edição do título em si:
function editar(param){
var elem = param;
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("value",elem.firstChild.nodeValue);
removerFilhos(elem);
elem.appendChild(input);
input.focus();
input.select();
addEvent(input,"blur",function(){
removerFilhos(elem);
elem.appendChild(document.createTextNode(input.value));
});
}
Vamos explicar cada linha, na primeira linha por questão de didática eu atribuo para a variável elem o parâmetro param que representa o node que será editado. Na segunda linha à variável input recebe a criação de um elemento do tipo input, este input que receberá o texto que se encontra dentro da tag H2. Na terceira e na quarta linha é feita a alteração de atributos do input para que este seja uma caixa de texto e receba o texto que está na tag. Após criar a caixa de texto e alterar seus atributos é necessário limpar o conteúdo da tag, para isso utilizei a função removerFilhos passando a variável elem que representa a tag H2 da nossa página. Na sexta linha eu adiciono como filho de elem a nossa caixa de texto através do método appendChild passando a caixa de texto criada como parâmetro. Após adicionar a caixa input a pagina eu utilizo o método focus para colocar o foco na caixa de texto e o método select para selecionar o texto que está na caixa. Na nona linha temos a parte mais complexa do nosso código, é a parte que temos que adicionar uma função para o elemento criado. É passado como parâmetro para a função addEvent o elemento input, o evento “blur” que executa a função quando a caixa perde o foco, e uma função escrita diretamente na chamada da função addEvent. Esta função interna que é executada assim que troca o foco do elemento input, esta limpa o conteúdo de elem através da função removerFilhos e adiciona um node de texto com o valor da caixa como filho de elem.
Para finalizar é necessário atribuir algumas funcionalidades ao evento onload da página, ou seja, assim que a página for carregada o código será execudado:
window.onload = function(){
addEvent($("titulo"),"click",new Function("editar(this)"));
}
A função acima serve para adicionar ao elemento com à id de “titulo” (que no caso é a nossa tag H2), no evento “click” a função editar que foi criada acima passando por parâmetro o próprio elemento através da declaração this.
O código completo deste exemplo se encontra abaixo, este código foi salvo com o nome titulo.js.
function $(elemento){
return document.getElementById(elemento);
}
function addEvent(obj, evType, fn){
try{obj.addEventListener(evType, fn, false);}catch(e){}
try{obj.attachEvent("on"+evType, fn);}catch(e){}
}
function editar(param){
var elem = param;
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("value",elem.firstChild.nodeValue);
removerFilhos(elem);
elem.appendChild(input);
input.focus();
input.select();
addEvent(input,"blur",function(){
removerFilhos(elem);
elem.appendChild(document.createTextNode(input.value));
});
}
function removerFilhos(param){
for(var i=0,elem;elem = param.childNodes[i];i++){
elem.parentNode.removeChild(elem);
}
}
window.onload = function(){
addEvent($("titulo"),"click",new Function("editar(this)"));
}
Nenhum comentário:
Postar um comentário