JQuery JEditable - 如何添加一个可见的编辑按钮？

Question

我喜欢这个插件，但实际上大多数人一开始并不会意识到可单击文本进行编辑。

理想情况下，最好在文本旁边添加一个按钮或一个简单的“[编辑]”链接，以便用户清晰地看到，但不会通过ajax提交。

有什么好主意吗？

- Sam3k

---

这是插件的链接：http://www.appelsiini.net/projects/jeditable，供您参考。 - Shawn Steward

Answer 1

只需为按钮添加一个事件，该事件单击jEditable字段即可：

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

而在jQuery中：

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

应该可以了。毕竟，这和用户点击元素是一样的。

- Tatu Ulmanen

---

这就是它！我在函数中添加了$(this).hide();来隐藏它，然后使用onblur再次显示它：onblur : function(value, settings) { $(this).next().show(); },谢谢！ - Sam3k

很聪明 :) 很高兴我能帮到你。 - Tatu Ulmanen

Answer 2

对于“编辑”链接，您可以使用。

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

- user565923

Answer 3

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();
        }
    });

- Josh

---

我还需要添加事件以在settings.onblur == 'cancel'时触发。 - Josh

Answer 4

您可以添加选项到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表单中

- signonsridhar

Answer 5

在 Jeditable 1.6.0 中，onblur 可以是一个函数：

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

如果您想在用户单击编辑区域之外时隐藏编辑内容，请将该函数设置为回调函数；如果您只想在用户按下取消按钮时隐藏它，则可以使用回调函数设置onreset选项。

- Emil Davtyan