[Fuente: web de jquery mobile]
La estructura “Page” de jQuery Mobile se optimiza para soportar tanto páginas sencillas, o también para enlaces internos locales “pages” dentro de una página.
El objetivo de seguir este modelo es permitir a los programadores crear webs utilizando las mejores prácticas – donde los enlaces normales funcionan sin ninguna configuración especial – ya que hacer interfaces de usuario ricos , como si fueran nativos no puede ser conseguido utilizando peticiones HTTP estandars.
La estructura Mobile page
Una web en jQuery Mobile debe comenzar con un ‘doctype’ de HTML5 para poder asi aprovechar todas las ventajas de todas las características del framework (Los dispositivos más antiguos con navegadores que no entienden HTML5 tan solo ignorarán el ‘doctype’ y algunos atributos de personalización). En el ‘head’ es donde ponemos las referencias a la librería de jQuery , jQuery Mobile y el mobiletheme CSS. Recomendamos referenciarlos CDN-Hosted para aumentar el rendimiento:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script> </head> <body> ...content goes here... </body> </html>
La meta tag Viewport
Nótese que en el código anterior hay un metatag viewport, esto es para especificar como el browser debe pintar el nivel de zoom de la página y las dimensiones. Si no está configurada, muchos navegadores de móviles utilizarán una página “virtual” con una anchura de 900 pixeles para hacerla funcionar bien con los sites de los desktop y las pantallas pueden parecer con un zoom muy cerca y demasiado ancho. Configurando este metatag con content=”width=device-width, initial-scale=1”, la anchura será ajustada a la anchura de la pantalla del dispositivo.
<meta name="viewport" content="width=device-width, initial-scale=1">
Estos settings no deshabilitan la posibilidad que tiene el usuario para hacer zoom de las páginas lo cual es importante desde un punto de la accesibilidad. Hay un bug que ocurre en los iOS y es que a pesar de poner esta metatag cuando se cambia la orientación estas configuraciones no se respetan, esperamos que en futuras versiones sea corregido. Se pueden poner valores a este metatag para deshabilitar el zooming si es necesario.
Dentro del body: Pages
Dentro de la tag <body>, cada vista o “page” dentro de un dispositivo móvil se identifica con un elemento (normalmente un div) con el atributo “data-role” con el valor “page”.
<div data-role="page"> ... </div>
Dentro de un contenedor “page”, se puede poner cualquier maquetación HTML, pero en las páginas típicas donde se utiliza jQueryMobile, el hijo inmediatamente seguido de un “page” son divs con los data-roles de “header”, “content” y “footer”:
<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
Poniendolo todo junto: Template de una página básica simple
Poniendolo todo junto , este es un template que puede ser bueno para empezar un proyecto:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Queda algo como esto:
Template de estructura multi página
Un solo documento HTML puede contener varios ‘pages’ que son cargados juntos , se hace apilando varios divs con el data-role de “page”. Cada bloque ‘page’ necesita un ID único (id=”foo”) que será utilizado para enlazar internamente entre ‘pages’ (href=”#foo”). Cuanod un link se pincha, el framework buscará un ‘page’ interno con el ID especificado y hará una transición hacia ella.
Veamos un ejemplo de un site de 2 ‘page’ programado con dos jQuery mobile divs. Observese que sólo hay que poner un atributo ID en los divs pages cuando queremos que sean enlazados internamente, si son páginas separadas en documentos HTML distintos entonces no es necesario:
<body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!-- /header --> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p>View internal page called <a href="#bar">bar</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!-- /header --> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p><a href="#foo">Back to foo</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body>
NOTA: Debido a qué estamos utilizando la hash para guardar el historial de navegación de todas las ‘pages’ Ajax, no es posible poner enlaces a un anchor del tipo index.html#foo para llegar a una page de jQuery Mobile, porque el framework buscará por una page con el ID de #foo en vez de hacer el comportamiento nativo de hacer scrolling al contenido con el ID.
Convenciones , no requerimientos
Aunque la estructura de ‘page’ subrayada arriba es una aproximación recomendada para una web app estándar desarrollada con jQueryMobile, el framework es muy flexible con la estructura del documento. Los elementos page, header, content y footer son opcionales y son útiles en el sentido de proporcionar una estructura básica de formato.
El envoltorio ‘page’ suele requerirse para que funcione la auto-inicializacion pero ahora también es opcional en documentos de una sola página.
Para una página con un custom layout , todos estos elementos pueden ser omitidos pero la navegación Ajax y todos los widgetsfuncionarán como hacen en el template que pusimos arriba. Por detrás, el framework inyectará el envoltorio ‘page’ si no está incluido en el maquetado HTML porque se necesita para manejar pages, pero el maquetado HTML de inicio puede ser extremadamente simple.
Observese que en un setup de múltiples páginas, se requiere tener page wrappers en el maquetado HTML para agrupar el contenido enmultiples pages.