将 jQuery UI 按钮与 jEditables 一起使用

Question

问题是，如何使 jEditable 元素中的按钮成为 jQuery UI 按钮？理想情况下，我想在加载 jEditable 表单元素后调用$(':button').button()。查看代码，4 个未记录的回调函数：onedit、onsubmit、onreset、onerror 似乎没有在正确的时间回调。

知道如何实现这一点吗？

编辑：

示例代码如下：http://jsfiddle.net/EU8ce/1/

我希望可编辑元素中的按钮是 jQuery UI 按钮。

Answer 1

通过对 jEditable 源代码的简要介绍（我对插件不是很熟悉），在这种情况下唯一有用的钩子（回调）是在呈现表单之前调用的 onedit。该插件应该真正支持onbeforeedit 和onafteredit 或其他东西，用于预渲染和后期渲染。但事实并非如此。

因此，您可以非常轻松地添加该功能。或者使用简单的点击处理程序解决它：

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

由于你先调用editable()，它会先绑定点击处理程序，所以后面的处理程序会在之后执行，这具有渲染后回调的效果，你可以在那里执行你的button()代码。

Answer 2

这可能不是世界上最干净的东西，但它确实有效：我创建了一个自定义类型（它反映了标准类型，但在按钮上调用了 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/