Páginas de jQuery Mobile

Entrar en jQuery Mobile

Consejo:A pesar de que jQuery Mobile es compatible con todos los dispositivos móviles, puede haber problemas de compatibilidad en computadoras de escritorio (debido a la limitada compatibilidad con CSS3).

Por lo tanto, en este tutorial, recomendamos que use el navegador Chrome de Google para obtener la mejor experiencia de lectura.

ejemplo

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Bienvenido a mi página principal</h1>
  </div>
  <div data-role="content">
    <p>Soy un desarrollador de móviles!</p>
  </div>
  <div data-role="footer">
    <h1>Texto del pie de página</h1>
  </div>
</div>
</body>

Prueba personalmente

Ejemplo de explicación:

  • data-role="page" es la página que se muestra en el navegador
  • data-role="header" crea una barra de herramientas en la parte superior de la página (usada comúnmente para títulos y botones de búsqueda)
  • data-role="content" define el contenido de la página, como texto, imágenes, formularios y botones, etc.
  • data-role="footer" crea una barra de herramientas en la parte inferior de la página

En estos contenedores, puede agregar cualquier elemento HTML, como párrafos, imágenes, títulos, listas, etc.

Consejo:Las propiedades data-* de HTML5 se utilizan para crear un aspecto interactivo amigable con el toque para dispositivos móviles mediante jQuery Mobile.

Agregar páginas en jQuery Mobile

En jQuery Mobile, puede crear múltiples páginas en un solo archivo HTML.

Por favor, use id únicos para separar cada página y utilice la propiedad href para conectarlas entre sí:

ejemplo

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Ir a la página dos</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Ir a la página uno</a>
  </div>
</div>

Prueba personalmente

Notas:Las aplicaciones web que contienen mucho contenido pueden afectar el tiempo de carga (por ejemplo, texto, enlaces, imágenes y scripts, etc.). Si no desea usar archivos internos en las páginas de enlaces, utilice archivos externos:

<a href="externalfile.html">Ir a la página externa</a>

Usar la página como cuadro de diálogo

El cuadro de diálogo es un tipo de ventana que se utiliza para mostrar información o solicitar entrada.

Si desea crear un cuadro de diálogo al hacer clic (tocar) en un enlace, agregue data-rel="dialog" a ese enlace:

ejemplo

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Ir a la página dos</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Ir a la página uno</a>
  </div>
</div>

Prueba personalmente