2011-06-08 15 views
11

Tengo una barra de herramientas en jquery mobile, compuesta por un conjunto de enlaces, que cargan cuadros de diálogo modales "pop" en la parte superior de mi aplicación javascript.cómo mostrar un cuadro de diálogo en jQuery Mobile

De esta manera:

  • Información
  • Cuando el div con id = "aproximadamente" tiene un data-role = "página". Me gustaría abrir el mismo diálogo desde el código, quizás como parte de un manejador de botones, pero no puedo encontrar ninguna forma de hacerlo.

    Este código no funciona. Solo muestra los elementos de la página "acerca de" de forma transparente en la parte superior de la página de mi currículum (sin estilo). ¿Cómo hago esto?

    $("#buttAbout").click(function() { 
        $('#about').show(); 
        return false; 
    }); 
    

    Respuesta

    22

    Parece que los cuadros de diálogo de jQuery mobile son bastante diferentes de jQuery UI. Esto debería hacer lo que quiere:

    $.mobile.changePage('#about','pop',false,true)

    La documentación para changePage es here. Básicamente, el primer argumento es la cadena para encontrar la página que desea (puede ser un identificador de elemento, un objeto jQuery o una URL de página), el segundo argumento es la transición de página, el tercero es la dirección de la transición (falso para reenvíos, verdadero para atrás), y el argumento final es si desea que la URL de la página se actualice después de la transición. Creo que también deberá asegurarse de que el atributo data-role esté configurado correctamente en dialog en el div para su cuadro de diálogo, a fin de garantizar el comportamiento correcto del historial/estilo.

    +0

    Cuando intento esto, aparece el mensaje de la consola de JavaScript: Uncaught no puede llamar a los métodos en el diálogo antes de la inicialización; intentó llamar al método 'abierto'. – Gerry

    +4

    ¿Ha inicializado el cuadro de diálogo primero? Bajo la norma de jQuery, que había necesidad de inicializar el diálogo con esto:. '$ ("# acerca") de diálogo()' o esto: '$ ("# acerca") de diálogo ({Autoopen. : falso}) ' antes de que pueda llamar abierto. (La versión 'autoOpen: false' le dice a jQuery que no abra el cuadro de diálogo la primera vez que lo inicializa, que probablemente sea el comportamiento que desea). Colocaría este código dentro de un bloque '$ (function() {....})' para que se ejecute en la carga de la página. Una vez que hayas hecho eso, el código en otro lugar debería poder abrir y cerrar cuando quieras. Si esto no ayuda, voy a jugar con jQuery mobile esta noche :) –

    +0

    Por alguna razón, esto no funciona con jquery mobile. El ejemplo de mi código es demasiado grande para este comentario, pero si incluyo el querymobile, no funciona. Con jquery-ui.js incluido, en cambio, funciona. – Gerry

    Cuestiones relacionadas