jQuery Mobile es un plugin del jQuery original y requiere que este último esté instalado previamente para poder funcionar.
Una vez activo, jQuery Mobile hace dos cosas:
Primero, optimiza las funciones nativas para mejorar su performance en equipos móviles.
Segundo, modifica el HTML y genera un layout con una serie de elementos gráficos predefinidos que acelera sustancialmente la velocidad de producción.
Instalar jQuery Mobile
Aunque es posible y es una técnica muy común en sitios web, instalar jQuery Mobile enlazando directamente a los archivos almacenados en la nube, se recomienda ampliamente no aplicar esa técnica para aplicaciones PhoneGap. Muy frecuentemente tu aplicación será utilizada sin ninguna conexión a internet o con conexión intermitente. Si los archivos de jQuery están enlazados a documentos en la nube, la aplicación quedaría posiblemente inutilizable.
Para instalar este framework, lo primero que debes hacer es descargar jQuery en su página oficial:
http://docs.jQuery.com/Downloading_jQuery#Current_Release
Una vez descargado jQuery, debes descargar el plugin de jQuery Mobile desde su sitio web oficial:
http://jquerymobile.com/download/
Comenzaremos un ejemplo que nos permita entender la programaciòn y la estructura de la aplicación.
Crearemos un archivo html con el siguiente codigo
<!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=2″ /> <title>Aplicacion jquery mobile</title> <meta charset=”utf-8″> <link rel=”stylesheet” href=”js/jQueryMobile/jQuery.mobile.theme-1.1.0.min.css” /> <script src=”js/jQuery-1.7.2.min.js”></script> <script src=”js/jQueryMobile/jQuery.mobile-1.1.0.min.js”></script> </head> <body> </body> </html>
jQuery Mobile nos permite crear interfaces optimizadas para dispositivos móviles muy rápidamente y con relativamente poco esfuerzo.
La forma en que trabaja, es reescribiendo el código original del documento y generando uno nuevo, más complejo, según las características y argumentos solicitados.
Una característica interesante de jQuery Mobile es que, a diferencia de un sitio web, que pasa de un documento HTML a otro para mostrar la información, las páginas o pantallas de una aplicación se manejan desde un solo documento HTML.
Las páginas o pantallas están en un único archivo, jQuery Mobile las administra para mostrar sólo la parte del documento correspondiente a cada pantalla mientras que el resto permanece oculto. De esta forma se acelera sustancialmente la carga de páginas, también permite administrar eventos y animaciones entre una pantalla y otra.
jQuery Mobile aprovecha al máximo los nuevos elementos de HTML5 y hace un uso intensivo de los atributos personalizados que se definen con el prefijo “data-”
Por ejemplo data-role, uno de los atributos más usados en jQuery Mobile, permite definir el rol a nivel de funcionalidad y apariencia del elemento que lo contiene. Al definir el rol de un elemento, este atributo permite crear páginas, botones, menús y muchos elementos más.
Al insertar el atributo data-role en cualquier tag lo convertimos en un elemento de la interfaz. Sin necesidad agregar ningún código adicional jQuery agrega todos los elementos gráficos, clases y hasta animaciones necesarios para el funcionamiento de ese elemento en particular.
Por ejemplo, para crear una página se utiliza el atributo data-role=”page” de esta forma:
<div data-role=”page” id=pantalla1”> <h1> Pantalla 1 </h1> <ul data-role=”listview” > <li><a href=”#pantalla1″> Pantalla 1</a></li> <li><a href=”#pantalla2″> Pantalla 2 </a></li> </ul> </div> <div data-role=”page” id=”pantall2”> <h1> Pantalla 2 </h1> <a href=”#” data-rel=”back” data-role=”button” >Regresar </a> </div>
El enlace del ejemplo no solo permite ir a la pantalla 2 , jQuery Mobile automáticamente incluyó una animación de transición para darle una apariencia similar a la de una aplicación nativa.
Llevemos un poco más lejos el enlace que acabamos de crear y agreguemos el atributo de jQuery Mobile data-role=”button” para que este enlace se comporte como un botón:
Para regresar a la página principal, se puede aplicar la técnica anterior de enlazar un link al id de la página principal, o más sencillo aún, se puede utilizar el atributo data-rel=”back” que regresa la aplicación a la pantalla inmediatamente anterior.