Windows Phone y JQuery Metro

El dia de hoy les traigo una pequeña prueba que he realizado con JQuery Metro. Se trata de unos archivos JavaScript y CSS3 que nos ayudan a dibujar una interfaz del tipo Metro, la cual es usada en Windows Phone y Windows 8. En esta prueba se va a tratar de imitar la aplicación del Hub de Contactos.

Archivos requeridos (descargar):

• JQueryMetro.js
• JQueryMetro.css

Primer paso

Lo que vamos a hacer es crear la siguiente estructura de archivos, donde agregaremos un archivo Index.html con la estructura básica y el body vacio. Ademas vease que ya agregamos los archivos que descargamos en una carpeta llamada lib.

Segundo paso

Ahora vamos a referenciar los archivos que hemos descargado añadiendo las correspondientes lineas de codigo en el area de head del Index.html.

Tercer paso

En el body agregaremos las siguientes instrucciones donde crearemos dos listas, una de Contactos y otra de Favoritos, cada una en un div diferente.


Resultado

Si seguimos los pasos correctamente veremos el siguiente resultado al abrir el archivo Index.html en nuestro navegador:

Hará falta que ajusten la ventana un poco para que se vea como en la imagen. Prueben dando click en Favoritos...

Este es un proyecto que se encuentra actualmente en desarrollo y que ya cuenta con mucha funcionalidad. Ademas provee la gran mayoría de los controles existentes para Windows Phone. Si no me creen vean el sitio del proyecto desde su Windows Phone (de preferencia) o navegador.

Aqui hay otro buen post acerca de lo mismo.