对话框中按钮的自定义放置-jQuery UI [英] custom placement of buttons in dialog box - jquery ui

问题描述

我想将添加到对话框中的按钮移到顶部或左侧，该如何使用jquery ui做到这一点.添加ok后，它可以显示在最右端吗?

I wanted to move the buttons added to my dialog box to either top or left how can this be done i'm using jquery ui. When ok is added it shows up at extreme right end can this be placed around ?

$(function() {
$("#dialog-message").dialog({
    modal : true,
    resizable : false,
    buttons : {
        ok:function() {
            $(this).dialog("close");
        }
    }

    });
});

推荐答案

要将按钮左/中/右对齐，请禁用浮动功能，并相应地调整text-align属性:

To place the buttons left/center/right aligned, disable the floating and adjust the text-align property accordingly:

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
   float: none;
}

.ui-dialog .ui-dialog-buttonpane {
     text-align: center; /* left/center/right */
}

演示

DEMO

这是按钮的标记:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <div class="ui-dialog-buttonset">
        <!-- the buttons are here -->
    </div>
</div>

默认的CSS指定:

• text-align: left;表示元素.ui-dialog-buttonpane
• float:right表示元素.ui-dialog-buttonset

• text-align: left; for the element .ui-dialog-buttonpane
• float:right for the element .ui-dialog-buttonset

这篇关于对话框中按钮的自定义放置-jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！