dialog proporcionada por la extensión page.dialog del widget de página le permite estilizar una página como un diálogo, sin embargo, el manejo especial de la navegación será eliminado. También puede considerar la implementación de diálogos utilizando widgets emergentes.Cualquier página puede presentarse como un diálogo modal añadiendo el atributo data-rel="dialog" al enlace ancla de la página. Cuando se aplica el atributo «diálogo», el framework añade estilos para añadir esquinas redondeadas, márgenes alrededor de la página y un fondo oscuro para que el «diálogo» parezca estar suspendido por encima de la página.
|
1
|
|
Puede abrirse un diálogo mediante programación llamando a la función $.mobile.changePage método:
|
1
2
3
4
5
|
|
Transiciones
Por defecto, el cuadro de diálogo se abrirá con una transición ‘pop’. Como en todas las páginas, puede especificar cualquier transición de página que desee en el diálogo añadiendo el atributo data-transition al enlace. Para que se sienta más como un diálogo, recomendamos especificar una transición de «pop», «slidedown» o «flip».
Los valores posibles incluyen: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none.
|
1
|
|
Cierre de diálogos
Cuando se hace clic en cualquier enlace dentro de un diálogo, el framework cerrará automáticamente el diálogo y pasará a la página solicitada, como si el diálogo fuera una página normal. Sin embargo, los diálogos también pueden encadenarse, como se explica más adelante en «Encadenamiento de diálogos». Del mismo modo, un enlace que abra una ventana emergente también dejará el diálogo en su lugar.
Si el diálogo tiene una cabecera, el framework añadirá un botón de cierre a la izquierda de la cabecera. Puedes cambiar la posición añadiendo data-close-btn="right" al contenedor del diálogo. Si no quieres un botón de cierre en la cabecera o añades un botón de cierre personalizado, puedes utilizar data-close-btn="none".
Para crear un botón de «cancelación» en un diálogo, sólo tienes que enlazar con la página que provocó la apertura del diálogo y añadir el atributo data-rel="back" a tu enlace. Este patrón de enlace a la página anterior también se puede utilizar en dispositivos que no sean JS.
Para los enlaces generados por JavaScript, puede simplemente establecer el atributo href a «#» y utilizar el atributo data-rel="back". También puede llamar al método close() del diálogo para cerrarlo de forma programada, por ejemplo: $( ".ui-dialog" ).dialog( "close" ).
Establecer el texto del botón de cierre
Al igual que el plugin de la página, puede establecer el texto del botón de cierre de un diálogo a través de una opción o atributo de datos. La opción puede configurarse para todos los diálogos vinculándose al evento mobileinit y estableciendo la propiedad $.mobile.dialog.prototype.options.closeBtnText a una cadena de su elección, o puede colocar el atributo de datos data-close-btn-text para configurar el texto desde su marcado.
Historia &Comportamiento del botón de retroceso
Dado que los diálogos se utilizan típicamente para apoyar las acciones dentro de una página, el framework no incluye los diálogos en el seguimiento de la historia del estado hash. Esto significa que los diálogos no aparecerán en la cronología del historial de navegación cuando se haga clic en el botón Atrás. Por ejemplo, si estás en una página, haces clic en un enlace para abrir un diálogo, cierras el diálogo y luego navegas a otra página, si haces clic en el botón Atrás del navegador en ese momento navegarás de vuelta a la primera página, no al diálogo.
Cadenar diálogos
Por favor, ten en cuenta que si un diálogo abre otro diálogo (encadenamiento), al cerrar el último con un enlace de tipo data-rel="back" siempre se navegará al diálogo anterior hasta llegar a la página raíz de tipo data-role="page". Esto garantiza una navegación consistente entre diálogos.
Estilización &temática
Los diálogos pueden ser estilizados con diferentes muestras de temas, al igual que cualquier página añadiendo atributos data-theme a los contenedores de cabecera, contenido o pie de página.
Por defecto los diálogos tienen esquinas redondeadas. La opción de esquinas puede establecerse en falso añadiendo data-corners="false" al contenedor del diálogo:
Los diálogos parecen estar flotando sobre una capa de superposición. Esta superposición adopta el color de contenido de la muestra ‘a’ por defecto, pero el atributo data-overlay-theme puede añadirse a la envoltura de la página para establecer la superposición a cualquier letra de la muestra.
Los diálogos también pueden usarse más como una hoja de control para ofrecer múltiples botones si simplemente se elimina el margen superior del elemento contenedor interno del diálogo. Por ejemplo, si su página de diálogo tuviera una clase de my-dialog, podría añadir este CSS para fijar ese diálogo en la parte superior: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, o simplemente podrías aplicar ese estilo a todos los diálogos con .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Ancho y márgenes de los diálogos
Para facilitar la lectura, los diálogos tienen un width por defecto de 92,5% y un max-width de 500 píxeles. También hay un margin superior del 10% para dar a los diálogos un margen superior mayor en las pantallas más grandes, pero que se contrae a un margen pequeño en los smartphones. El contenedor interior del diálogo se desplaza hacia el top con 15px para ocultar el estilo de la esquina si un diálogo se utiliza como una hoja de control (ver arriba). Para anular estos estilos, añada la siguiente regla de anulación de CSS a su hoja de estilos y modifíquela según sea necesario:
|
1
2
3
4
5
6
7
8
|
|