JQueryUI对话框大小 | JQueryUI对话框大小

本文介绍了JQueryUI对话框大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是JQueryUI的新手，尽管我有一个对话框在工作，但它没有以我认为指定的大小打开.为什么在定义对话框时设置宽度和高度不会影响对话框的初始大小?如何将其设置为600像素乘500像素?

I'm new to JQueryUI, and though I have a dialog working, it doesn't open at the size I think I'm specifying. Why does setting the width and height when the dialog is defined not affect the initial size of the dialog? How do I make it 600px by 500 px?

这是定义对话框的div:

Here is the div that defines the dialog:

<div id="dialog-form" title="Create Appointment">
  <form> . . . </form>
</div>

下面是其中的JavaScript:

Here is the JavaScript that makes a dialog of it:

$(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        maxWidth:600,
        maxHeight: 500,
        width: 600,
        height: 500,
        modal: true,
        buttons: {
            "Create": function() {
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
        }
    });

以及定义用于打开按钮的JavaScript:

And the JavaScript that defines the button to open it:

$("#create-appt")
    .button()
    .click(function() {
        $("#dialog-form").dialog("open");
    });
});

我现在看到了问题:除了我使用--app=...命令行选项在Google Chrome中运行它之外，它可以很好地工作，因此它不会重新加载整个应用程序.

I see the problem now: this would have worked fine, except I was running it in Google Chrome using the --app=... command-line option, so it was not reloading the whole application.

推荐答案

问题:为什么在定义对话框时设置宽度和高度不会影响对话框的初始大小?

Question: Why does setting the width and height when the dialog is defined not affect the initial size of the dialog?

答案:它确实...您正在使用哪种浏览器以及jQuery的版本.

Answer: It does... what browser are you using and version of jQuery.

我将您的代码从上面剪切/粘贴到一个小样本中，并且效果很好...我在下面粘贴了完整的样本，您可以尝试一下.

I cut/pasted your code from above into a small sample and it worked perfectly... I pasted the full sample below you can try it on your end.

 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css"      rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js">     </script>
        <script type="text/javascript">
        $(document).ready(function () {
            $(function() {
            $("#dialog-form").dialog({
                autoOpen: false,
                    maxWidth:600,
                    maxHeight: 500,
                    width: 600,
                    height: 500,
                    modal: true,
                    buttons: {
                    "Create": function() {
                    $(this).dialog("close");
                    },
                    Cancel: function() {
                    $(this).dialog("close");
                    }
                },
                    close: function() {
                }
                });
            });

            $("#create-appt")
            .button()
            .click(function() {
                $("#dialog-form").dialog("open");
            });
        });
        </script>

    </head>
        <body>
    <h1>test</h1>
    <div id="dialog-form" title="Create Appointment">
        <p> this is my test </p>
    </div>
    <input type="button" id="create-appt" value="test"/>
    </body>
 </html>

这篇关于JQueryUI对话框大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！