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對話框大小

回答

相關問題