JQuery JEditable - Как добавить видимую кнопку «Изменить меня»? - PullRequest
Новая
       11

JQuery JEditable - Как добавить видимую кнопку «Изменить меня»?

14 голосов
/ 06 января 2010

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

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

Есть идеи?

Ответы [ 5 ]

12 голосов
/ 06 января 2010

Просто добавьте событие к кнопке, которая нажимает на поле jEditable: 

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

А в jQuery: 

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

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

3 голосов
/ 26 января 2011

Для ссылки «Редактировать» вы можете использовать 

<a href="#" onclick="$('.editable_textarea').trigger('click');>edit</a>
3 голосов
/ 05 мая 2010

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

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

Затем я добавил следующий код в 2 местах в 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();
        }
    });
0 голосов
/ 30 октября 2013

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

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

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

0 голосов
/ 17 февраля 2012

Вы можете добавить опции в 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 форме

...