Class myEditable

[Henrique Barcelos 290]

Desenvolvi essa classe implementando o estilo editable, igual ao do orkut, está bem completa, é só dar asas à imaginação

 

Edit #1: Correção de pequenos bugs...

 

var myEditable = function(seletor, preferencias){
 this.preferencias = preferencias;
 this.seletor = $(seletor);

 this.teclaEnviar = 13;
 this.teclaCancelar = 27;

 this.blur = null;
 this.focus = null;
 this.keyup = null;

 this.classeInput = "";
 
 this.send = null;
 this.change = true;
 
 this.setarPreferencias();
 this.criar();
}

myEditable.prototype.setarPreferencias = function(){
 if (typeof this.preferencias == "object") {
 for (atributo in this.preferencias) {
 if (atributo in this) {
 this["" + atributo.toString() + ""] = this.preferencias[atributo];
 }
 }
 }
}

myEditable.prototype.criar = function(){
 var selfClass = this;
 var send = this.send;
 var blur = this.blur;
 var focus = this.focus;
 var keyup = this.keyup;
 var classeInput = this.classeInput;
 
 if ($("#myEditableInput").size() != 0) return false;
 
 this.seletor.dblclick(function(){
 selfClass.seletor = $(this);
 
 $(this).before("<input id='myEditableInput' value='" + $(this).html() + "'/>");
 $("#myEditableInput").css("display", "none").addClass(classeInput);
 
 $(this).animate({
 opacity: 'hide'
 }, {
 duration: "fast",
 queue: false,
 complete: function(){
 $("#myEditableInput").animate({
 opacity: 'show'
 }, "fast").focus();
 }
 });
 
 $("#myEditableInput").focus(function(){
 if (focus) focus.call(selfClass);
 });
 
 $("#myEditableInput").blur(function(){
 if (blur) blur.call(selfClass);
 
 this.input = $(this);
 var valor = $.trim(this.input.val());
 if (selfClass.change) {
 if (valor != selfClass.seletor.html() && valor != "") {
 selfClass.seletor.html(valor);
 if (send) send.call(selfClass);
 }
 }
 
 this.input.animate({
 opacity: 'hide'
 }, {
 duration: "fast",
 queue: false,
 complete: function(){
 selfClass.seletor.animate({
 opacity: 'show'
 }, "fast");
 $("#myEditableInput").remove();
 }
 });
 });
 
 $("#myEditableInput").keyup(function(event){
 if(keyup) keyup.call(selfClass);
 if (event.keyCode == selfClass.teclaCancelar) {
 change = false;
 $(this).blur();
 }
 if (event.keyCode == selfClass.teclaEnviar) {
 $(this).blur();
 }
 });
 });
 
}

myEditable.prototype.stop = function (){
 return false;
}

Só dando um exemplo de como usar:

 

var editData = new myEditable(".data_termino", {
 send: function(){
 var cod_opcao = this.seletor.parent().find(".cod_enquete").val();
 var novo_valor = this.seletor.html();
 novo_valor = formatarData(novo_valor);
 var dados = "cod_enquete=" + cod_opcao + "&novo_valor=" + novo_valor;
 
//Usando a classe myAjax, também criada por mim e encontrada no Lab. de scripts JS do Imasters:
var ajax = new myAjax({
 method: "POST",
 params: dados
});

ajax.load("editar_enquete.php");
 
 },
 keyup: function(){
 var input = document.getElementById("myEditableInput");
 mascara(input, mData);
 },
 blur: function(){
 var input = document.getElementById("myEditableInput");
 var validacao = validarData(input.value);
 if (!validacao) {
 this.change = false;
 this.stop();
 }
 else {
 this.change = true;
 }
 }
 });

Através dos métodos de envio, cancelamento, etc, você pode fazer praticamente tudo com isso aqui...

[Henrique Barcelos 290]

Update #1