JQuery JEditable - Come aggiungere un pulsante Edit Me visibile?

Question

amo questo plugin ma la realtà è che la maggior parte delle persone non si renderà conto in un primo momento che possono fare clic sul testo da modificare.

Idealmente, sarebbe bello aggiungere un pulsante accanto al testo o un semplice collegamento [Modifica] che l'utente vede chiaramente ma non viene mai inviato tramite ajax.

Qualche idea?

Answer 1

Basta aggiungere un evento al pulsante, che fa clic sul campo jEditable:

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

E in jQuery:

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

Che dovrebbe farlo. Dopotutto, è la stessa cosa che l'utente fa clic sull'elemento.

Answer 2

Il commento di Sam3k è utile, ma non perfetto. Fa in modo che il pulsante di modifica riesamini prima di nascondere i campi/i pulsanti modificabili. Per risolvere questo problema, ho invece aggiunto un evento onCancel personalizzato.

Prima aggiunto un valore predefinito a $ .fn.editable.defaults per il nuovo evento (es onCancel: {})

poi ho aggiunto il seguente codice nel 2 posti in jquery.jeditable.js: (1) quando si colpisce la fuga e (2) premendo il pulsante Annulla.

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

Questo è tutto.

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

Answer 3

Per link "Modifica", è possibile utilizzare

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

Answer 4

È possibile aggiungere opzioni per jeditable per mostrare il pulsante di invio,

$('#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>',      
... 

l'arco con il salvare l'icona sarà presentare aggiunto in forma legale

Answer 5

In Jeditable 1.6.0 onblur può essere una funzione:

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

Quindi, se si desidera nascondere la modifica quando l'utente o scatti in fuori dell'area di Modifica set che funzionano come un callback, se si desidera nascondere solo quando l'utente preme annullare quindi eseguire l'impostazione onreset con un callback.