Crear una pagina
A pesar de que jQuery Mobile funciona en todos los dispositivos móviles, puede tener algunos problemas de compatibilidad en los ordenadores de sobremesa (debido al apoyo CSS3 limitada).
Para este tutorial, le recomendamos que utilice el navegador Google Chrome para una mejor experiencia de lectura.
A continuación, hemos creado una página sencilla, estándar jQuery Mobile:
Ejemplo
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> Inténtalo tú mismo " Ejemplo explicó:
- El data-role="page" es la página que se muestra en el navegador
- El data-role="header" crea una barra de herramientas en la parte superior de la página (de uso frecuente para el título o los botones de búsqueda)
- El data-role="main" define el contenido de la página, como texto, imágenes, botones, formas, etc.
- El "ui-content" clase añade el acolchado adicional y el margen dentro del contenido de la página
- El data-role="footer" crea una barra de herramientas en la parte inferior de la página
- Dentro de estos contenedores, se puede añadir cualquier elemento HTML - párrafos, imágenes, encabezados, listas, etc.
Los HTML5 data-* atributos se utilizan en todo jQuery Mobile para crear un "touch-friendly" aspecto y atractivo para los dispositivos móviles.
Adición de páginas en jQuery Mobile
En jQuery Mobile, puede crear varias páginas en un solo archivo HTML.
Separar cada página con un identificador único y utilizar el href atributo para enlazar entre ellos:
Ejemplo
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> Inténtalo tú mismo " Consejo: El tiempo de carga se verá afectado por las aplicaciones web con una gran cantidad de contenido (es decir, texto, enlaces, imágenes, scripts, etc.). Utilizar archivos externos si no desea vincular páginas internamente:
<a href="externalfile.html">Go To External Page</a>
Uso de páginas como cuadros de diálogo
Un cuadro de diálogo es un tipo de ventana que se utiliza para mostrar información especial o la entrada de la solicitud.
Para crear un cuadro de diálogo que aparece cuando un usuario pulsa sobre un enlace, añadir data-dialog="true" de la página que desea mostrar como un cuadro de diálogo:
Ejemplo
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> Inténtalo tú mismo "