JQuery JEditable - Cómo agregar un botón Visible Editarme?

Question

me encanta este complemento pero la realidad es que la mayoría de la gente no se dará cuenta al principio que puede hacer clic en el texto para editar.

Idealmente, sería bueno agregar un botón al lado del texto o un simple enlace [Editar] que el usuario ve claramente pero que nunca se envía a través de ajax.

¿Alguna idea?

Answer 1

Sólo tiene que añadir eventos al botón, que hace clic en el campo jEditable:

<span class="jeditable">jEditable field</span> 
<input type="button" class="jeditable-activate" value="Edit me!" /> 

Y en jQuery:

$('.jeditable-activate').click(function() { 
    $(this).prev().click(); 
}); 

Eso debería hacerlo. Después de todo, eso es lo mismo que el usuario al hacer clic en el elemento.

Answer 2

El comentario de Sam3k es útil, pero no perfecto. Hace que el botón de edición vuelva a mostrarse antes de ocultar los campos/botones editables. Para solucionar esto, en su lugar agregué un evento onCancel personalizado.

Primero añade un valor predeterminado a $ .fn.editable.defaults para el nuevo evento (es decir onCancel: {})

Luego añade el siguiente código en 2 lugares en jquery.jeditable.js: (1) cuando tocas escapar, y (2) presionas el botón cancelar.

if ($.isFunction(settings.oncancel)) { settings.oncancel.apply(self); } 

Eso es todo.

$("#emailRow span").editable(url, { 
     type: 'text', 
     cancel: 'Cancel', 
     submit: 'OK', 
     onCancel: function() { 
      $("#emailEditLink").show(); 
     } 
    }); 

Answer 3

Por "Editar" que aparece, puede utilizar

<a href="#" onclick="$('.editable_textarea').trigger('click');>edit</a> 

Answer 4

puede añadir opciones a jeditable para mostrar el botón de enviar,

$('#editable_field).editable(url..., 
{//options 
     type: 'text', 
     width: 230, /*input field width*/ 
     style: 'display: inline-block;width:260px', /*form width including input*/ 
     submit: '<span class="inlineEditSave"><img src="/beta/resource/images/icon/icon_save_check.png"/</span>',      
... 

el lapso con guardar icono será presentar anexado en la forma jeditable

Answer 5

En Jeditable 1.6.0 onblur puede ser una función:

  } else if ($.isFunction(settings.onblur)) { 
       input.blur(function(e) { 
        settings.onblur.apply(self, [input.val(), settings]); 
       }); 
      } else { 

por lo que si desea ocultar la edición cuando el usuario ya sea chasquidos hacia afuera del área de edición establece que funcionan como una devolución de llamada, si desea ocultar que sólo cuando el usuario presiona Cancel luego ponga el ajuste onreset con una devolución de llamada.