jQuery UI对话框，添加按钮旁边的元素 [英] jQuery UI Dialog, adding elements next to a button

问题描述

jQuery UI Dialog的一个好处是它有一个Buttons选项，可以自动正确定位它们。我只是想知道：我可以以某种方式在按钮旁放置元素吗？我有一个Ajax-Loader gif，我想在对话框的左下角显示，而按钮保持在右下方？

One of the nice things about the jQuery UI Dialog is that it has an option for Buttons, which automatically positions them correctly. I just wonder: Can I somehow place elements next to the buttons? I have a little Ajax-Loader gif that I would like to display in the lower left corner of the dialog, while the buttons stay at the lower right?

我知道我可以删除按钮并在HTML中手动创建它们，但由于jQuery已经为我处理定位和样式，我想保留该功能，如果它有意义。

I know I can just remove the buttons and create them manually in HTML, but as jQuery takes care of positioning and styling already for me, I'd like to keep that functionality if it makes sense.

    $("#newProjectDialog").dialog({
        bgiframe: true,
        resizable: false,
        width: 400,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Create': function() {
                $("#ajax-loader").show();
                // Make the Ajax Call and whatever else is needed
                $(this).dialog('destroy');
            },
            Cancel: function() {
                $(this).dialog('destroy');
            }
        }
    });

推荐答案

你基本上需要做的就是

//depending on what #ajax-loader is you maybe need to style it (float:left, ...)
$("#ajax-loader").clone(true).appendTo("div.ui-dialog-buttonpane").show();

低于一个有一些注意事项的发烧友版本。

Below a fancier version with a few considerations incorporated.

我想＃ajax-loader 看起来与此相似

<div id='ajax-loader'><img src='loader.gif' /><span>loading...</span></div>

或只是这个

<img id='ajax-loader' src='loader.gif' />

javascript看起来像这样

javascript can look like this

...
'Create': function() {
    var btnpane = $("div.ui-dialog-buttonpane");
    //prevent bad things if create is clicked multiple times
    var there = btnpane.find("#ajax-loader").size() > 0;
    if(!there) {
        $("#ajax-loader").clone(true).appendTo(btnpane).show();
        // Make the Ajax Call and whatever else is needed
        // if ajax call fails maybe add $("#ajax-loader", btnpane).remove();
        $(this).dialog('destroy');
    }
},
...

备注

• 您应该在<$ c $中拨打 .dialog（'destroy'） c>完成 ajax请求的事件，否则在ajax请求完成之前对话框可能会被销毁，用户甚至可能看不到loader。

• You should call .dialog('destroy') in the complete event of the ajax request else the dialog may get destroyed before the ajax request finished and the user may not even see the "loader".

这篇关于jQuery UI对话框，添加按钮旁边的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！