Question

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

我知道我可以删除按钮并在HTML中手动创建它们，但是由于jQuery已经为我完成了定位和样式设计，所以如果它有意义的话，我想保留它的功能。

    $("#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');
            }
        }
    });

Answer 1

你基本上需要做的就是

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

下面是一个有一些考虑因素的发烧友版本。

我想#ajax-loader看起来与此类似

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

或只是这个

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

javascript看起来像这样

...
'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');
    }
},
...

备注

你应该在ajax请求的.dialog('destroy')事件中调用complete，否则在ajax请求完成之前对话框可能会被销毁，用户甚至可能看不到“loader”。

Answer 2

如何在第一个ui-dialog-button之前插入微调器呢？

buttons: {
   'Create' : function() {
       $('<img src="spinner.gif" style="float: left;" />').insertBefore('.ui-dialog-buttonpane > button:first');
       ...ajax stuff...
       $(this).dialog('destroy');
    }
}

Answer 3

最好的方法是创建另一个按钮，使其完全透明，没有边框，并添加动画gif作为其背景图像。通过使用另一个按钮，您可以轻松找到相对于所有其他按钮的位置。

首先，为了能够更多地设置按钮样式，您需要创建一个更高级别的定义。所以而不是：

buttons: {
    'Create': function() {
        $("#ajax-loader").show();
        // Make the Ajax Call and whatever else is needed
        $(this).dialog('destroy');
    },
    Cancel: function() {
        $(this).dialog('destroy');
    }
}

这样做（注意方括号和一个缩进级别）：

buttons: [
    {
        id: 'create-button',
        class: 'create-button-class',
        text: 'Create',
        click: function() {
            $("#ajax-loader").show();
            // Make the Ajax Call and whatever else is needed
            $(this).dialog('destroy');
        }
    },
        text: 'Cancel',
        click: function() {
            $(this).dialog('destroy');
        }
    }
]

您可以为每个按钮分配ID和类。如果您指定了id和/或类，则可以对其应用CSS样式。

<style>
.create-button-class{
    height:50px;
    width:50px;
    left:-300px; /* Pushes it left, change value for desired location. */
}
.ui-dialog .ui-dialog-buttonpane #create-button { 
    color: transparent; /* no inner color and also hides text */
    border: none; /* removes border */
    background-image:url(images/spinner-gif-25px.gif); /*replaces default image */
    background-size: 50px;
    background-repeat: no-repeat;
}
</style>

如果您愿意，可以创建一个普通的附加按钮并使用左侧的CSS属性将其推到按钮面板的最左侧，然后再使其透明且无边框。

jQuery UI对话框，添加按钮旁边的元素

3 个答案: