Recebi do Maicon Carlos, que não me deixou nenhum link para site seu para referenciar o seguinte email:

“Rodrigo..analiso seu blog a tempo e hoje vou sugerir algo….

http://www.nick-dunn.co.uk/files/editinplace/editinplace.htm

um editar em ajax (Edit in Place)….seria interessante pois você poderia adicionar e melhorar seu framework.

particularmente eu estou procurando algo sobre isso, e no brasil não achei nada, vou continuar tentando aqui..se você fazer a gente pode trocar idéias, seria um post interessante na sua coleção de “post’s de qualidade”..
”

Bom Maicon, primeiro agradeço pelo “posts de qualidade”, e seguindo, neste site eles utilizaram o Prototype Framework, mais uma biblioteca gráfica, e um script personalizado montado sobre essa plataforma, totalizando 72kb de código.

Eu usei no meu script alguns códigos prontos que já tinha, os quais serão base para minha biblioteca javascript, o dia que der…
Estes scripts estão em fs.js

E criei o arquivo editinplace.js para montar a lógica da coisa.

No final o código ficou assim:

// Edit in Place
// Por Fazedor de Site
// http://www.fazedordesite.com
function removeForm(){
	// retiramos o formulario de dentro do span
	$id("form_altera").parentNode.removeChild($id("form_altera"));
}
function mostra(){
	// verificamos se ja existe o formulario
	if(!$id("form_altera")){
		// muda a propriedade CSS display para none para desocupar o espaço
		$id("editinplace").style.display='none';

		// criamos um nome objeto span dentro do pai do span que ja existia
		// no nosso caso o pai é a tag

		$obj.create("span","formulario",$id("editinplace").parentNode);

		// criamos um form dentro do novo span
		$obj.create("form","form_altera",$id("formulario"));
		// setando os atributos do formulario
		$id("form_altera").setAttribute("name","form_altera");
		$id("form_altera").onsubmit = function(){
			$id("editinplace").style.display="";
			effects.fade(null,"editinplace",0,100);
			fsAjax("altera.php","editinplace","Alterando","POST", "form_altera",1,"removeForm()")
			return false;
		}

		// criamos um input dentro do primeiro filho da SPAN de id formulario
		// no nosso caso sera a tag form
		$obj.create("input","valor",$id("formulario").firstChild);
		// atribuimos as propriedades desse input
		$id("valor").setAttribute("name","valor");
		$id("valor").setAttribute("type","text");
		$id("valor").style.width='300px';
		// aqui atribuimos a caixa de texto a string a ser editada
		$id("valor").setAttribute("value",$id("editinplace").innerHTML);

		// inserimos uma quebra de linha
		$obj.create("br",null,$id("formulario").firstChild);	

		// criamos um input dentro do primeiro filho da
		// SPAN de id formulario
		// no nosso caso sera a tag form
		$obj.create("input","enviar",$id("formulario").firstChild);
		// atribuimos as propriedades desse input
		$id("enviar").setAttribute("name","Alterar");
		$id("enviar").setAttribute("value","Alterar");
		$id("enviar").setAttribute("type","submit");
	}
}
function inicia(){
	// quando clicado
	$id("editinplace").onclick = function(){
		// escondemos o SPAN que contém o texto para clicar
		// mandando ir da opacidade 100 a 0 com efeito fade
		// maiores detalhes ver o arquivo fs.js
		effects.fade(null,"editinplace",100,0,"mostra()");
	}
	// pega o evento do mouse sobre o span
	$id("editinplace").onmouseover = function(){
		this.style.background = "#EDF4FC";
		this.style.cursor = "pointer";
	}
	// pega o evento do mouse saindo do span
	$id("editinplace").onmouseout = function(){
		this.style.background = "#FFF";
		this.style.cursor = "";
	}

}
// Ouvinte que aguarda o carregamento da pagina
// ao ser carregado o HTML chama a funçao "inicia"
addEvent(window,"load",inicia);

Este é um exemplo que fiz rapidamente, baseado na idéia, não no código, da sugestão que recebi.

Ou seja, serve para um local ser editado, e é obstrutivo, ou seja, sem javascript, sem edição, porém o conteúdo é visualizado.

Serve para sistemas específicos, mas se acharem que a idéia é interessante podemos evoluir e melhora-la tranquilamente.

Ah, e o nosso script sem compactações ficou com 9,13kb

Sigam o link abaixo para ver a pagina de exemplo e baixar o código:

Edit in place Javascript

follow the white rabbit…

Trackback para este Post | Assine o Feed RSS dos comentários