JQuery Mobile

JQuery Mobile es un Framework optimizado para dispositivos táctiles (también conocido como Framework móvil) que está siendo desarrollado actualmente por el equipo de proyectos de jQuery. El desarrollo se centra en la creación de un Framework compatible con la gran variedad de teléfonos inteligentes y tabletas, algo necesario en el creciente y heterogéneo mercado de tabletas y teléfonos inteligentes. El Framework de jQuery Mobile es compatible con otros frameworks móviles y plataformas como PhoneGap y Worklight entre otros. Todos los proyectos que utilizan jQuery Mobile utilizan más o menos el mismo código. Es importante enlazar las librerías JavaScript de jQuery y jQuery Mobile, así como sus hojas de estilo (estos archivos pueden descargarse y utilizarse localmente, pero se recomienda enlazarlos desde el CDN de jQuery). El cuerpo del documento contiene los divs con atributos “data-role”. Este atributo, vía jQuery Mobile define el aspecto y la funcionalidad del div. Un div con el data-role “page”, por ejemplo, representa un contenido de pantalla completa en el proyecto web. Una “page” puede tener divs definidos por data role “header”, “content” y “footer” (pero no es necesario, cualquier HTML está permitido dentro del div “page”). Un documento HTML puede contener más de un elemento “page”, y por tanto más de un elemento de pantalla completa. De esta forma solo es necesario cargar un único documento que contiene las múltiples páginas de la aplicación. Una “page” puede enlazar a otro en el mismo documento referenciando a su atributo id (ej: href=”segundo”). Si se emplea esta solución, hemos de tener en cuenta que se cargará por defecto el primer “page” que se encuentre en el documento, siendo este siempre nuestro punto de entrada. A continuación vamos a mostrar una pequeña explicación de los atributos más comunes de jQuery Mobile: * data-role – Especifica el rol de cada elemento, como “header”, “content”, “footer”, etc. * data-theme – Especifica que tema de diseño se va a utilizar con los elementos dentro del contenedor. Puede ser “a” o “b”. * data-position – Especifica si la posición de un elemento debería de ser fija, en cuyo caso se renderizará en la parte superior (en el header) o en la parte inferior (en el footer) por defecto, independientemente del tamaño del contenido mostrado. * data-transition – Especifica una de las 10 posibles animaciones que se pueden emplear al pasar entre “pages”. * data-icon – Especifica uno de los 50 posibles iconos que pueden ser añadidos a un elemento. Estos iconos se mostrarán siendo parte del elemento en el que se muestran. jQuery Mobile provee un Framework potente de “tematización” que permite a los desarrolladores personalizar los esquemas de color y determinados aspectos de la UI (User Interface) controlados por CSS. Los desarrolladores pueden usar la aplicación de jQuery Mobile ThemeRoller para personalizar estos aspectos y crear una amplia gama de experiencias. Tras desarrollar un tema con ThemeRoller, el desarrollador puede descargar su CSS personalizado y emplearlo directamente en su proyecto. Cada tema contiene hasta 26 permutaciones de color, cada una de ellas consistente de un “header bar”, “content body” y “button states”. Combinar estas diferentes permutaciones permite a los desarrolladores crear un rango de efectos visuales más grande de lo que podrían lograr con solo una permutación por tema. Cambiar entre los diferentes temas es tan sencillo como añadir un atributo llamado “data-theme” a los elementos HTML. El tema por defecto de jQuery Mobile viene con 5 diferentes permutaciones de color, llamadas “a”, “b”, “c”, “d” y “e”.