Используйте кнопки jQuery UI с jEditables - PullRequest
Новая
       57

Используйте кнопки jQuery UI с jEditables

0 голосов
/ 22 июля 2011

Вопрос в том, как сделать кнопки внутри элементов jEditable кнопок пользовательского интерфейса jQuery? В идеале я хочу вызвать $(':button').button() после загрузки элементов формы jEditable. Глядя на код, 4 недокументированных функции обратного вызова: onedit, onsubmit, onreset, onerror, кажется, не перезванивают в нужное время.

Есть идеи, как мне этого добиться?

EDIT :

Вот пример кода: http://jsfiddle.net/EU8ce/1/

Мне бы хотелось, чтобы кнопки в редактируемом элементе были кнопками пользовательского интерфейса jQuery.

Ответы [ 2 ]

3 голосов
/ 22 июля 2011

Из краткого обзора источника jEditable (я не очень знаком с плагином), единственная ловушка (обратный вызов), которая полезна в этом случае, - это onedit, который вызывается до отображения формы.Плагин должен действительно поддерживать onbeforeedit и onafteredit или что-то еще для предварительного и пост-рендеринга.Но это не так.

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

http://jsfiddle.net/EU8ce/3/

Поскольку вы сначала вызываете editable(), сначала он будет привязан к обработчику щелчков, поэтому последующие обработчики будут выполняться после, что имеетэффект обратного вызова после рендеринга, и вы можете выполнить свой код button() там.

2 голосов
/ 22 июля 2011

это может быть не самая чистая вещь в мире, но она работает: я создал собственный тип (который отражает стандартный тип, но вызывает button () на кнопках 

$.editable.addInputType('example',{
    element : function(settings, original) {
                    var input = $('<input />');
                    if (settings.width  != 'none') { input.width(settings.width);  }
                    if (settings.height != 'none') { input.height(settings.height); }
                       input.attr('autocomplete','off');
                    $(this).append(input);
                    return(input);
                },

     buttons : function(settings, original) {
                    var form = this;
                    if (settings.submit) {
                        /* if given html string use that */
                        if (settings.submit.match(/>$/)) {
                            var submit = $(settings.submit).click(function() {
                                if (submit.attr("type") != "submit") {
                                    form.submit();
                                }
                            });
                        /* otherwise use button with given string as text */
                        } else {
                            var submit = $('<button type="submit" />').button();
                            submit.html(settings.submit);                            
                        }
                        $(this).append(submit);
                    }
                    if (settings.cancel) {
                        /* if given html string use that */
                        if (settings.cancel.match(/>$/)) {
                            var cancel = $(settings.cancel);
                        /* otherwise use button with given string as text */
                        } else {
                            var cancel = $('<button type="cancel" />').button();
                            cancel.html(settings.cancel);
                        }
                        $(this).append(cancel);

                        $(cancel).click(function(event) {
                            //original.reset();
                            if ($.isFunction($.editable.types[settings.type].reset)) {
                                var reset = $.editable.types[settings.type].reset;                                                                
                            } else {
                                var reset = $.editable.types['defaults'].reset;                                
                            }
                            reset.apply(form, [settings, original]);
                            return false;
                        });
                    }
                }

});
$("#edit").editable("someurl", {
    type: "example",
    submit: "OK",
    cancel: "Cancel"
});


$('#button').button();

скрипка здесь: http://jsfiddle.net/EU8ce/4/

...