jQuery Mobile - Páginas

El usuario puede interactuar con las páginas de jQuery Mobile, que agrupa el contenido en vistas lógicas y vistas de página. La vista de página se puede animar usando transiciones de página. Se pueden crear varias páginas utilizando un documento HTML y, por lo tanto, no es necesario solicitar el contenido del servidor.

La siguiente tabla muestra los tipos de páginas en detalle.

No Señor. Tipo y descripción
1 Única página

Se crea una sola página en un documento HTML utilizando una forma estándar de escribir una plantilla.

2 Plantilla de varias páginas

Se pueden incluir varias páginas en un único documento HTML, que se cargan juntas agregando varios divs con data-role = "page" .

3 Página de cuadros de diálogo

Los cuadros de diálogo modales abren el contenido en una superposición interactiva sobre la página.

Convenciones, no requisitos

  • Los elementos de atributo de rol de datos como el encabezado, pie de página, página y contenido se utilizan para proporcionar el formato y la estructura básicos de una página.

  • Para documentos de una sola página, el envoltorio de página que se requería para la inicialización automática se establece como opcional.

  • El elemento estructural se puede excluir de una página web con diseño personalizado.

  • Para administrar páginas, el marco inyecta el envoltorio de página cuando no está incluido en el marcado.

Precargar páginas

Incluyendo el atributo data-prefetch , podemos precargar páginas en el DOM en las plantillas de una sola página. Para más información haga clic aquí .

Caché DOM

Cuando la memoria del navegador se llena en DOM, ralentiza el navegador móvil o puede bloquearse debido a la carga de varias páginas. Hay un método simple para mantener el DOM ordenado:

  • Cuando una página se carga a través de ajax, indica eliminar la página del DOM cuando se redirige a otra página.

  • La página anterior que ha visitado se puede recuperar del caché cuando la vuelva a visitar.

  • En lugar de eliminar las páginas, puede decirle a jQuery mobile que lo mantenga en DOM usando la siguiente línea:

$.mobile.page.prototype.options.domCache = true;
  • Configure la opción domCache como verdadera en el complemento de página para mantener todas las páginas en el DOM, que se visitó anteriormente.

pageContainerElement.page({ domCache: true });