0

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

知道如何实现这一目标吗？

编辑：

这是示例代码：http: //jsfiddle.net/EU8ce/1/

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

4

2 回答 2

3

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

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

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

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

于 2011-07-22T09:00:49.570 回答
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/

于 2011-07-22T09:08:45.767 回答