使用jQuery UI按钮与jEditables

Use jQuery UI buttons with jEditables

本文关键字：jEditables 按钮 UI jQuery 使用      更新时间：2023-09-26

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

你知道我该怎么做吗?

编辑:

下面是示例代码:http://jsfiddle.net/EU8ce/1/

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

从一个简短的jEditable源代码(我不是真的熟悉的插件)，唯一的钩子(回调)，在这种情况下是有用的是onedit，这是在表单被渲染之前调用。插件应该真正支持onbeforeedit和onafteredit或其他东西，用于前后渲染。但它没有。

所以你可以很容易地添加这个功能。或者使用一个简单的单击处理程序来解决这个问题:

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

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

这可能不是世界上最干净的东西，但它工作:我创建了一个自定义类型(镜像标准类型，但在按钮上调用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/

相关文章：