JQueryUI对话框大小

我是新来的JQueryUI，虽然我有一个对话框工作，它不打开我认为我指定的大小。为什么在定义对话框时设置宽度和高度不会影响对话框的初始大小？我如何使它成为600px x 500像素？JQueryUI对话框大小

这里是定义对话框中的div：

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

这里是使它的对话框中的JavaScript：

$(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定义按钮来打开它：

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

编辑：

我现在看到了问题：除非我在谷歌浏览器中使用--app=...命令行选项运行它，否则它会工作正常，所以它不会重新加载整个应用程序。

来源

2011-04-11 JasonFruit

问：为什么设置时被定义对话框不影响直径的初始大小的宽度和高度登录？

答案：它的确...你使用的浏览器和jQuery的版本。

我将上面的代码从上面剪切/粘贴到一个小样本中，并且它的工作非常完美...我粘贴了下面的完整示例，您可以在您的最后尝试。

<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>

来源

2011-04-11 19:31:21 Todd

就这样：它正在工作。看到我上面的编辑为我看不到它的原因。 – JasonFruit 2011-04-11 19:41:04

我不知道到底是什么，它的发生，但你可以改变一点点你的代码，它会产生你所期望的结果：

而使用的AutoOpen你可以在onclick事件设置这些选项的：

$("#create-appt") 
    .button() 
    .click(function() { 
     $("#dialog-form").dialog({width: 600,height:500}); 
    });

我希望这有助于最好的问候，马塞洛 Vismari

来源

2011-04-11 19:19:45 Vismari

我尝试了这种方式早了，它也做了同样的事情;查看我的最新编辑的原因。 – JasonFruit 2011-04-11 19:36:20

JQueryUI对话框大小

回答

相关问题