JQuery JEditable - Làm thế nào để thêm một nút chỉnh sửa có thể nhìn thấy tôi?

Question

Tôi thích plugin này nhưng thực tế là hầu hết mọi người sẽ không nhận ra lúc đầu rằng họ có thể nhấp vào văn bản để chỉnh sửa.

Tốt nhất là nên thêm nút bên cạnh văn bản hoặc liên kết [Chỉnh sửa] đơn giản mà người dùng thấy rõ ràng nhưng không bao giờ được gửi qua ajax.

Bất kỳ ý tưởng nào?

Answer 1

Chỉ cần thêm một sự kiện vào nút nhấp chuột trên các lĩnh vực jEditable:

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

Và trong jQuery:

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

Điều đó sẽ làm điều đó. Sau khi tất cả, đó là điều tương tự như người dùng nhấp vào yếu tố.

Answer 2

Nhận xét của Sam3k hữu ích nhưng không hoàn hảo. Nó làm cho nút chỉnh sửa được chỉnh sửa lại trước khi ẩn các trường/nút có thể chỉnh sửa. Để giải quyết điều này, tôi thay vào đó thêm một sự kiện onCancel tùy chỉnh.

Đầu tiên thêm một mặc định để $ .fn.editable.defaults cho sự kiện mới (tức là onCancel: {})

Sau đó, tôi đã thêm đoạn mã sau vào 2 nơi trong jquery.jeditable.js: (1) khi nhấn thoát, và (2) nhấn nút hủy.

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

Vậy đó.

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

Answer 3

Đối với liên kết "Edit", bạn có thể sử dụng

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

Answer 4

Bạn có thể thêm tùy chọn để jeditable để hiển thị các nút gửi,

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

các trình nhịp cầu với lưu biểu tượng sẽ được gắn vào biểu mẫu có thể chỉnh sửa

Answer 5

Trong Jeditable 1.6.0 onblur có thể là một hàm:

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

Vì vậy, bạn nếu bạn muốn ẩn chỉnh sửa khi người dùng hoặc nhấp chuột ra khỏi khu vực chỉnh sửa thiết lập chức năng đó như là một callback, nếu bạn muốn ẩn nó chỉ khi người dùng nhấn hủy bỏ sau đó thiết lập các thiết lập onreset với một cuộc gọi lại.