Resumen del uso de varios efectos de conmutación de páginas y cuadros de diálogo modales en HTML5

Este artículo presenta principalmente el uso de varios efectos de conmutación de páginas y cuadros de diálogo modales para usted. Introduce las técnicas del uso de varios elementos de página de HTML5 con más detalle. Es muy práctico. Los amigos que lo necesitan pueden referirse a él.

Este artículo resume los diversos efectos de conmutación de páginas y el uso de diálogo modal de HTML5 en detalle. Compártelo para su referencia. El análisis específico es el siguiente:

La propiedad de transición de datos puede definir el efecto de animación del cambio de página.

Por ejemplo: <a href = index.html Data-Transition = Pop> Pop </a>

Tabla de parámetros de transición de datos:

Descripción del parámetro

Deslice de derecha a izquierda a página

SlideUp se desliza hacia arriba desde el fondo

Deslizos por la parte superior a la parte inferior en

Pop se expande gradualmente desde el centro

el desvanecimiento aparece gradualmente

volteo

Nota: Si desea mostrar el botón Atrás en la página de destino, puede agregar el atributo Data-Direction = inverso al enlace. Este atributo es el mismo que el Data Data-Back = True. No sé qué atributo se conservará en la versión oficial.

Un diálogo modal es una capa de pseudo-flotación con una barra de título redondeada y un botón de cierre para eventos exclusivos. Cualquier página estructurada se puede utilizar para implementar aplicaciones de diálogo modales utilizando el enlace de diálogo Data-Rel =.

Por ejemplo: <a href = foo.html data-rel = diálogo> Abrir diálogo </a>

Este efecto de conmutación de página también puede usar el efecto de parámetro de transición de datos de la página estándar. Se recomienda usar parámetros POP, SlideUp y Flip para lograr mejores resultados.

Este cuadro de diálogo modal generará un botón de cierre de forma predeterminada, que se utiliza para volver a la página principal. En dispositivos con capacidades de secuencias de comandos débiles, también puede agregar un enlace con Data-Rel = Back para implementar el botón Cerrar.

Para los dispositivos que admiten scripts, puede usar directamente href =# o data-Rel = Back para lograr el apagado. También puede usar el método de cierre incorporado para cerrar el cuadro de diálogo modal, como: $ ('. Ui-dialog'). Dialog ('Cerrar').

Dado que el cuadro de diálogo modal es una página temporal que se muestra dinámicamente, esta página no se guardará en la tabla hash, lo que significa que no podemos retirarnos a esta página. Por ejemplo, si hace clic en un enlace en la página A para abrir el cuadro de diálogo B, la operación se completa y el cuadro de diálogo está cerrado, y luego salta a la página C. En este momento, hace clic en el botón Atrás del navegador y volverá a la página A, no la página B.

Las barras de herramientas se utilizan principalmente en encabezado, pie de página y otras áreas, y se utilizan para apoyar e implementar la aplicación de funciones comerciales en la página. JQuery Mobile proporciona una solución relativamente completa.

La barra de herramientas se divide en tres aplicaciones: barra de encabezado, barra de pies y navegación (barra de navegación).

Entre ellos, el título y el pie de página se aplican de diferentes maneras en la página. La barra de herramientas predeterminada se coloca de manera en línea. Este método de posicionamiento puede lograr la máxima compatibilidad, incluida una buena optimización para dispositivos con un script deficiente y compatibilidad con CSS.

Otro método es solucionarlo, que también puede ser estático. Este método de posicionamiento permite que la barra de herramientas siempre se mantenga en la parte superior o inferior de la pantalla. Y puede aceptar eventos de clic para mostrar/ocultar la barra de herramientas, que ha logrado el propósito de maximizar el uso del espacio de la pantalla.

Método de implementación: Agregar posposición de datos = atributo fijo a las áreas de título y pie de página.

El contenedor de título es un control de visualización para el área del encabezado de la página, que se utiliza principalmente para mostrar el título y el área de operación principal.

Código de estructura: