在新行中对齐jQuery按钮

时间:2014-07-08 04:54:18

标签: jquery css jquery-ui

我在jQuery对话框表单中只有3个按钮。我想在中间顶部对齐第一个按钮,在第二行/第一行对齐其他两个按钮。我如何操纵按钮?

这是我的剧本:

<script type="text/javascript">


    $(document).ready(function () {

        $('#wrapper').dialog({

            modal: true,
            autoOpen: false,
            resizable: false,
            title: 'Create new user',
            buttons: {
                "Register": function () {
                    $(this).dialog("register");


                },
                "Send": function () {
                    $(this).dialog("send");


                },
                "Cancel": function () {
                    $(this).dialog("close");

                }
            }
        });

        $("a").click(function (e) {
        $('#wrapper').dialog('open');
        $("#wrapper").css("background", "#E18728");
        $("#wrapper").dialog({ width: 'auto', height: 'auto' });

        return false;

        });

    });

</script>

谢谢。

1 个答案:

答案 0 :(得分:0)

试试这个: - 在<center></center>中包装注册按钮(这个标签在HTML4中已弃用,因此在HTML5中可能不起作用。当对话框打开时,您可以使用<div align="center"></div>代替包装按钮)。
在jQuery下面使用:

$(document).ready(function () {

        $('#wrapper').dialog({

            modal: true,
            autoOpen: false,
            resizable: false,
            title: 'Create new user',
            open: function(event) {
                 // wrap button inside center tag
                 $('.ui-dialog-buttonset').find('button:contains("Register")').wrap('<center></center>');
            },
            buttons: {
                "Register": function () {
                    $(this).dialog( "register");


                },
                "Send": function () {
                    $(this).dialog("send");


                },
                "Cancel": function () {
                    $(this).dialog("close");

                }
            }
        });

        $("a").click(function (e) {
        $('#wrapper').dialog('open');
        $("#wrapper").css("background", "#E18728");
        $("#wrapper").dialog({ width: 'auto', height: 'auto' });

        return false;

        });

    });

<强> Demo JSFiddle with Center tag

如果是HTML5,请使用以下

open: function(event) {
     $('.ui-dialog-buttonset').find('button:contains("Register")').wrap('<div align="center"></div>');
 }

<强> Demo JSFiddle for HTML5