我喜欢这个插件,但实际上大多数人一开始并不会意识到可单击文本进行编辑。
理想情况下,最好在文本旁边添加一个按钮或一个简单的“[编辑]”链接,以便用户清晰地看到,但不会通过ajax提交。
有什么好主意吗?
我喜欢这个插件,但实际上大多数人一开始并不会意识到可单击文本进行编辑。
理想情况下,最好在文本旁边添加一个按钮或一个简单的“[编辑]”链接,以便用户清晰地看到,但不会通过ajax提交。
有什么好主意吗?
只需为按钮添加一个事件,该事件单击jEditable字段即可:
<span class="jeditable">jEditable field</span>
<input type="button" class="jeditable-activate" value="Edit me!" />
而在jQuery中:
$('.jeditable-activate').click(function() {
$(this).prev().click();
});
应该可以了。毕竟,这和用户点击元素是一样的。
<a href="#" onclick="$('.editable_textarea').trigger('click');>edit</a>
Sam3k的评论很有用,但并不完美。它会在隐藏可编辑字段/按钮之前重新显示编辑按钮。为了解决这个问题,我添加了一个自定义的onCancel事件。
首先,在$.fn.editable.defaults中为新事件(即onCancel:{})添加了一个默认值。
然后我在jquery.jeditable.js的两个位置添加了以下代码:(1)按下escape键时,(2)按下取消按钮时。
if ($.isFunction(settings.oncancel)) { settings.oncancel.apply(self); }
就是这样。
$("#emailRow span").editable(url, {
type: 'text',
cancel: 'Cancel',
submit: 'OK',
onCancel: function() {
$("#emailEditLink").show();
}
});
您可以添加选项到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>',
...
提交带有保存图标的span将被附加在jeditable表单中
onblur
可以是一个函数: } else if ($.isFunction(settings.onblur)) {
input.blur(function(e) {
settings.onblur.apply(self, [input.val(), settings]);
});
} else {
如果您想在用户单击编辑区域之外时隐藏编辑内容,请将该函数设置为回调函数;如果您只想在用户按下取消按钮时隐藏它,则可以使用回调函数设置onreset
选项。