[英]JQuery JEditable - How to Add A Visible Edit Me Button?
我喜歡這個插件,但現實是大多數人一開始都不會意識到他們可以點擊文字進行編輯。
理想情況下,在文本旁邊添加一個Button或者用戶清楚看到但從未通過ajax提交的簡單[Edit]鏈接會很不錯。
有任何想法嗎?
只需在按鈕上添加一個事件,點擊jEditable字段即可:
<span class="jeditable">jEditable field</span>
<input type="button" class="jeditable-activate" value="Edit me!" />
在jQuery中:
$('.jeditable-activate').click(function() {
$(this).prev().click();
});
應該這樣做。 畢竟,這與用戶點擊元素是一回事。
Sam3k的評論很有用,但並不完美。 它會導致編輯按鈕在隱藏可編輯字段/按鈕之前重新顯示。 為了解決這個問題,我改為添加了一個自定義onCancel事件。
首先為新事件添加默認值$ .fn.editable.defaults (即onCancel:{})
然后我在jquery.jeditable.js中的2個位置添加了以下代碼:(1)當遇到轉義時,(2)按下取消按鈕。
if ($.isFunction(settings.oncancel)) { settings.oncancel.apply(self); }
而已。
$("#emailRow span").editable(url, {
type: 'text',
cancel: 'Cancel',
submit: 'OK',
onCancel: function() {
$("#emailEditLink").show();
}
});
對於“編輯”鏈接,您可以使用
<a href="#" onclick="$('.editable_textarea').trigger('click');>edit</a>
在Jeditable 1.6.0 onblur
可以是一個功能:
} else if ($.isFunction(settings.onblur)) {
input.blur(function(e) {
settings.onblur.apply(self, [input.val(), settings]);
});
} else {
因此,如果您想要在用戶點擊編輯區域設置該功能作為回調時隱藏編輯,如果您只想在用戶按下取消時隱藏它,則使用回調設置onreset
設置。
您可以向jeditable添加選項以顯示提交按鈕,
$('#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>',
...
帶有保存圖標的提交范圍將附加在可編輯的表單中
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.