14

我喜欢这个插件，但现实是大多数人一开始并没有意识到他们可以点击文本进行编辑。

理想情况下，最好在文本旁边添加一个按钮或一个简单的 [Edit] 链接，用户可以清楚地看到但永远不会通过 ajax 提交。

有任何想法吗？

4

5 回答 5

12

只需向单击 jEditable 字段的按钮添加一个事件：

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

在 jQuery 中：

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

那应该这样做。毕竟，这与用户单击元素是一回事。

于 2010-01-05T21:59:12.017 回答
3

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();
        }
    });
于 2010-05-05T18:50:36.857 回答
3

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

<a href="#" onclick="$('.editable_textarea').trigger('click');>edit</a>
于 2011-01-26T20:09:21.193 回答
0

您可以向 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>',                      
...

带有保存图标的提交范围将附加在可编辑的表单中

于 2012-02-17T00:41:56.157 回答
0

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

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

因此，如果您想在用户单击编辑区域时隐藏编辑，将该功能设置为回调，如果您只想在用户按下取消时隐藏它，则onreset使用回调设置设置。

于 2013-10-30T10:47:20.230 回答