jQuery UI对话框按钮定位

Question

如何将jQuery UI中的按钮彼此分开定位.按钮在同一方向上对齐.我希望一个按钮与左边对齐,而另一个按钮在右边.可能吗？

Answer 1

好的,通过Firebug看这个......

Dialog控件创建一个带有被调用类的div ui-dialog-buttonpane,因此您可以搜索它.

如果您正在处理多个按钮,您可能需要:first和:last属性.

所以,$(".ui-dialog-buttonpane button:first)应该给你第一个按钮.并$(".ui-dialog-buttonpane button:last)应该给你最后一个按钮.

从那里你可以修改css/style以将每个按钮放在右边和左边(修改浮点值).

无论如何,这就是我现在接近它的方式.

Answer 2

这是我能够完成结果的方式.

 $('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    class: 'leftButton',
                    text: 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });

然后在样式中添加!important标志,这是必需的,因为该类首先被jquery覆盖.

<style>
    .leftButton
    {
        margin-right: 170px !important;
    }
</style>

Answer 3

我结束了以下解决方案(根据库克的回答).与其他答案相比,这有许多优点(对我而言):

• 纯HTML/CSS - 没有javascript
• 无需在对话框上设置固定宽度(即使用户调整对话框大小,按钮也始终与左边缘对齐)
• CSS中不需要!important标志

我使用的HTML(从库克的答案稍微修改):

$('#dialog-UserDetail').dialog({
        autoOpen: false,
        width: 'auto',
        modal: true,
        buttons: {
            DelUser:{ 
                class: 'leftButton',
                text: 'Delete User',
                click : function (){
                    alert('delete here');
                }
            },
            "Update User": function () {
                   alert('update here');
       },
            Close: function () {
                $(this).dialog("close");
            }
        }
    });

然后我使用了以下CSS:

.leftButton
{
    position: absolute;
    left:8px;
}

结果是"leftButton"按钮始终固定在对话框左边缘8px处,而其他按钮右对齐.如果您有多个按钮需要左对齐,那么您需要将左参数增加前一个按钮的宽度加上每个按钮所需的间距,这在我看来不够优雅.但是,对于一个左对齐按钮,这就像一个魅力.