JQuery JEditable - jak dodać widoczny przycisk Edit Me?

Question

Uwielbiam tę wtyczkę, ale w rzeczywistości większość ludzi nie zdaje sobie sprawy z tego, że może kliknąć tekst do edycji.

Najlepiej byłoby dodać przycisk obok tekstu lub prosty link [Edytuj], który użytkownik wyraźnie widzi, ale nigdy nie zostanie przesłany przez ajax.

Wszelkie pomysły?

Answer 1

Wystarczy dodać zdarzenie do przycisku, który kliknie na polu jEditable:

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

I w jQuery:

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

To powinno wystarczyć. W końcu to samo, co użytkownik klikający element.

Answer 2

Komentarz Sam3k jest przydatny, ale nie doskonały. Powoduje to, że przycisk edytowania zmienia się ponownie przed ukryciem edytowalnych pól/przycisków. Aby rozwiązać ten problem, dodałem niestandardowe zdarzenie onCancel.

pierwsze dodaje domyślnie do $ .fn.editable.defaults dla nowego zdarzenia (tj onCancel: {})

Potem dodaje następujący kod w 2 miejscach w jquery.jeditable.js: (1) po uderzeniu w ucieczkę i (2) naciśnięciu przycisku anulowania.

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

To wszystko.

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

Answer 3

Dla link "edytuj", można użyć

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

Answer 4

Możesz dodać opcje do jeditable pokazać przycisk Prześlij,

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

submit przęsło z zaoszczędzić ikona zostanie dołączany w osobnej postaci

Answer 5

W wersji Jeditable 1.6.0 onblur może pełnić funkcję:

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

Więc jeśli chcesz ukryć zmienił, gdy użytkownik bądź kliknięcia z obszaru edycji ustawić tę funkcję wywołania zwrotnego, jeśli chcesz ukryć go tylko wtedy, gdy użytkownik naciśnie anulować następnie wybrać ustawienie onreset z oddzwanianiem.