JQuery JEditable - Как добавить видимую кнопку Edit Me?

Мне нравится этот плагин, но реальность такова, что большинство людей сначала не поймут, что могут нажать на текст для редактирования.

В идеале было бы неплохо добавить кнопку рядом с текстом или простую ссылку [Edit], которую пользователь ясно видит, но никогда не будет отправлен через ajax.

Любые идеи?

Ответ 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();
});

Это должно сделать это. В конце концов, это то же самое, что пользователь нажимает на элемент.

Ответ 2

Комментарий Sam3k полезен, но не идеален. Это приводит к тому, что кнопка редактирования восстанавливается до сокрытия редактируемых полей/кнопок. Чтобы решить эту проблему, вместо этого я добавил пользовательское событие onCancel.

Сначала добавлено значение по умолчанию $. fn.editable.defaults для нового события (например, onCancel: {})

Затем я добавил следующий код в 2-х местах в jquery.jeditable.js: (1) при ударе, и (2) нажав кнопку отмены.

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

Что это.

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

Ответ 3

Для ссылки "Изменить" вы можете использовать

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

Ответ 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>',                      
...

пробел представления с иконкой сохранения будет добавлен в jeditable form

Ответ 5

В Jeditable 1.6.0 onblur может быть функция:

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

Итак, если вы хотите скрыть редактирование, когда пользователь либо выберет из области редактирования, который работает как обратный вызов, если вы хотите скрыть его только тогда, когда пользователь нажимает на отмену, установите параметр onreset с помощью Обратный вызов.