Me mudo

Este blog no recibirá ya más actualizaciones. Ve al nuevo blog enricflorit.com o averigua por qué me mudo.

sábado, 25 de agosto de 2012

Primeros pasos con jQuery mobile: páginas básicas

Desde que salió la primera versión oficial de jQuery Mobile habrán pasado ya unos seis meses, y la verdad es que ha mejorado mucho: me acabo de pasar por las demos oficiales y he visto que han incluido muchas mejoras, y evidentemente, ahora debería ser más estable.

Creo que para poder apreciar las posibilidades de un framework o una librería lo mejor es verlo en acción, así que pasaos por aquí para ver los muchos usos que se le han dado a jQm - incluso grandes empresas como Disney, Verizon, Jeep... lo usan!

Así que si quieres meterte de lleno en esta librería, vamos a empezar creando algunas páginas básicas.


La plantilla base
Lo bueno que tiene jQuery es que tiene una gran comunidad detrás, así que la documentación es muy buena - lo mismo sucede con jQuery mobile. Para empezar a crear "algo", es tan sencillo como copiar este código:


<!DOCTYPE html> 
<html> 
<head> 
<title>My Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.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.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
<body> 

<div data-role="page">

<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->

<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Con esto tendremos una página con una barra superior (toolbar) con un título de prueba. Y lo bueno es que la librería viene con 5 temas de prueba, de la a a la e. Para cambiar el tema de cualquier elemento, solo hay que añadirle:

data-theme="a"

(O cualquier otra letra), y ya está. Pero lo bueno es que esto casi no tiene límites. Por ejemplo, para cambiar el tema de la página:

<div data-role="page" data-theme="b">

El tema predeterminado para todos los elementos es el "c". Para entendernos mejor, el tema "a" es el más oscuro de todos, y el tema "e" es el más claro (con tonos amarillos).


Creando múltiples páginas
Evidentemente, con jQm podemos crear páginas como siempre, una página un archivo. Pero para hacer más rápida una página, se nos ofrece la opción de tener varias vistas en el mismo archivo. Así que dentro del <body> podríamos tener:


<!-- Inicio de la primera página -->
<div data-role="page" id="foo">

<div data-role="header">
<h1>Título de la primera página</h1>
</div><!-- /header -->

<div data-role="content">
<p>Primer párrafo. Como esta página está primero, es la que se verá por defecto, y no la #bar.</p>
<p>Ver la página interna <a href="#bar">bar</a></p>
</div><!-- /content -->

<div data-role="footer">
<h4>Pie de página</h4>
</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">

<div data-role="header">
<h1>Título de la segunda página</h1>
</div><!-- /header -->

<div data-role="content">
<p>Esta página está segunda, así que no se verá a menos que se haga click en el link de la primera</p>
<p><a href="#foo">Volver a foo</a></p>
</div><!-- /content -->

<div data-role="footer">
<h4>Pie de página</h4>
</div><!-- /footer -->
</div><!-- /page -->


Evidentemente, esto es el ejemplo más básico, se podría poner mucho más: más páginas, contenido...

En la siguiente entrada de "Primeros pasos con jQm" explicaré las toolbars (barras de título y pie de página) a fondo. No dejéis de visitar el blog!

Un saludo ;-)

1 comentario:

  1. Estoy haciendo un programa en jquery mobile y phonegad en dreamweaver. Lo que pasa es que necesito llamar a unas funciones de javascript al momento de enviar a otra pagina html, pero al hacer la transicion no llama a esas funciones...necesito ayuda gracias

    ResponderEliminar

Related Posts Plugin for WordPress, Blogger...