Ejemplo de jQuery Mobile
En esta entrada publicare un pequeño código para mostrar lo sencillo que es desarrollar una aplicación web móvil con jQuery Mobile. Como se muestra en el recuadro que se encuentra a continuación, una típica página de jQuery Mobile tiene tres secciones: un encabezado, contenido y pie de página.
El código anterior genera una vista similar a la que se muestra en la siguiente figura.
La sección de encabezado es donde normalmente se coloca los encabezados de página y/o logos. La sección de contenido es donde la web específica de la aplicación y el contenido de los diferentes widgets. La sección de pie de página es ideal para la navegación.
Para aprovechar las funciones de jQuery Mobile avanzadas y la sintaxis HTML, un documento HTML jQuery Mobile debe definir el doctype HTML5. El resto del documento HTML consta de:
- El encabezado contiene las referencias a jQuery Mobile y los temas CSS.
- La sección del cuerpo contiene el contenido de la aplicación Web.
- El pie de página puede ser fácilmente utilizado como una barra de navegación.
Con el siguiente código se muestra un ejemplo de un documento jQuery Mobile con HTML5.
<!-- Definir el doctype HTML5: -->
<!DOCTYPE html>
<!-- Definir el <head> HTML5 con referencias a jQuery, jQuery Mobile y temas CSS móviles: -->
<html>
<head>
<title> Título de la página </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css "/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js "> </script>
</head>
<!-- Definir el <body> documento HTML que incluye los elementos móviles de jQuery: -->
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1> HEADER </h1>
</div>
<div data-role="content">
<p>
ÁREA DE CONTENIDO
</p>
</div>
<div data-role="footer">
<h1> FOOTER </h1>
<!-- El pie de página se puede convertir en una barra de navegación muy fácilmente, como sigue: -->
<center>
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button"> One </a>
<a href="index.html" data-role="button"> Two </a>
<a href="index.html" data-role="button"> Tres </a>
<a href="index.html" data-role="button"> Ninguno </a>
</div>
</div>
</center>
</div>
</div>
<div data-role="page" id="page2">
:
:
</div>
</body>
</html>
El resultado del código anterior se puede observar en la siguiente figura. 
Referencias:[1] http://www.ibm.com/developerworks/library/wa-jquerymobileupdate/index.html
[2] http://jquerymobile.com/demos/1.2.0/
[3] http://the-jquerymobile-tutorial.org/
No hay comentarios.:
Publicar un comentario