2011-04-11 5 views
25

저는 JQueryUI를 처음 사용하고 있습니다. 대화 상자가 작동하지만 지정하는 크기로 열리지 않습니다. 대화 상자가 정의 될 때 너비와 높이를 설정하는 것이 대화 상자의 초기 크기에 영향을주지 않는 이유는 무엇입니까? 600px에서 500px까지 어떻게 만들 수 있습니까? 열려면 버튼을 정의JQueryUI 대화 상자 크기

$(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() { 
     } 
    }); 

그리고 자바 스크립트 : 여기

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

은 그것의 대화 상자를 만드는 자바 스크립트입니다 : 여기

대화 상자를 정의하는 사업부입니다

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

편집 :

지금은 문제가 발생합니다. --app=... 명령 줄 옵션을 사용하여 Google 크롬에서 실행 중이 었음을 제외하고는 문제가 없었으므로 전체 애플리케이션을 다시로드하지 않았습니다.

답변

25

질문 : 대화 상자가 직경의 초기 크기에 영향을 미치지 정의 될 때 폭과 높이를 설정하지 왜 로그?

답변 : 어떤 브라우저를 사용하고 있으며 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> 
+0

그냥 그렇게 작동했습니다. 내가 볼 수없는 이유로 위의 편집을 참조하십시오. – JasonFruit

12

나는 무슨 일이 일어나고 정확히 알 수는 없지만 조금 당신의 코드를 변경할 수 그것을 당신이 기대하는 결과를 생성합니다 :

대신 당신이 onclick 이벤트에이 옵션을 설정할 수 있습니다에 AutoOpen 사용

:

나는이 안부, 마르셀로 Vismari 도움이되기를 바랍니다
$("#create-appt") 
    .button() 
    .click(function() { 
     $("#dialog-form").dialog({width: 600,height:500}); 
    }); 

+0

나는 그 방법을 일찍 시도했고, 똑같은 일을했다. 그 이유에 대한 최신 편집을 참조하십시오. – JasonFruit

관련 문제