JQueryUI Diálogo Tamaño

Soy nuevo en JQueryUI, y aunque tengo un diálogo funcionando, no se abre en el tamaño que creo que estoy especificando. ¿Por qué el ajuste del ancho y alto cuando se define el diálogo no afecta el tamaño inicial del diálogo? ¿Cómo lo hago 600px por 500 px?JQueryUI Diálogo Tamaño

Aquí es el div que define el cuadro de diálogo:

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

Aquí está el código JavaScript que hace que un cuadro de diálogo de la misma:

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

Y el código JavaScript que define el botón para abrirlo:

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

Editar:

Veo el problema ahora: esto habría funcionado bien, excepto que lo estaba ejecutando en Google Chrome utilizando la opción de línea de comandos --app=..., por lo que no estaba recargando toda la aplicación.

Fuente

2011-04-11 JasonFruit

pregunta: ¿Por qué establecer el ancho y la altura cuando el diálogo se define no afecta al tamaño inicial del dia ¿Iniciar sesión?

Respuesta: Lo hace ... qué navegador estás usando y la versión de jQuery.

Corté/pegué su código de arriba en una muestra pequeña y funcionó perfectamente ... Pegué la muestra completa a continuación, puede probarlo en su extremo.

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

Fuente

2011-04-11 19:31:21 Todd

Solo eso: estaba funcionando. Ver mi edición anterior por la razón que no pude verlo. – JasonFruit

No sé exactamente lo que está sucediendo, pero se puede cambiar un poco su código y va a producir el resultado que espera:

En lugar de utilización Autoopen puede configurar estas opciones en el evento onclick :

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

espero que esto ayude a saludos cordiales, Marcelo Vismari

Fuente

2011-04-11 19:19:45 Vismari

Lo intenté de esa manera antes, e hizo lo mismo; ver mi última edición por el motivo. – JasonFruit

Respuesta

Cuestiones relacionadas