Cargando

Ir a contenido


 


Crear Aplicaciones con jQuery Mobile

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.


Escrito por el mar 14 2014 19:53 jquery


jq.jpg


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>

image07.png


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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado mar 14 2014 19:53
  •   Actualizado may 08 2014 10:02
  •   Visitas 862