Introducción breve
- Para agregar comportamiento a los elementos html se utiliza (principalmente) el atributo
data-rolelo cual define, como es de esperar por su nombre, el rol que cumplirá el elemento. - Si bien se pueden organizar cada pantalla como un archivo html aparte, jquerymobile ofrece el concepto de páginas, ¿y como se indica este comportamiento?... si, si, con
data-role="page". - También contamos con otros
data-rolecomoheader,content,footer,dialog,listview,button, etc. - Un elemento importante de definir en el
<head>del html es<meta name="viewport" content="width=device-width, initial-scale=1">el cual determina que el ancho de la página es el ancho de la pantalla de dispositivo
Nota: al momento de escribir este post, la versión 1.1 está en rc1 (Unstable build) por lo que los ejemplos están desarrollados con la última versión estable (1.0.1).
Referenciando js y css
descargarLa estructura base de cualquier página (de este post) será:
Multipage
descargar ver imagenPodemos definir varias page en un mismo html y para acceder a cada una de ellas lo haremos con # indicando así el fragmento (o recurso secundario) que queremos cargar:
Principales partes de una página
descargar ver imagenCada página se divide en 3 secciones principales: header, content y footer, el atributo data-position="fixed" indica que el elemento siempre se mantendrá visible.
Navigator
descargar ver imagenPodemos agregar un menú para navegar entre las páginas, esto se hace con el data-role="navbar", armando una lista ul/li con elementos a en su interior como la siguiente:
Listas
descargar ver imagenUna forma bastante elegante de armar una lista es con el
data-role="listview" en un elemento ul:Mejorando las listas
descargar ver imagenAlgunos efectos interesantes sobre las lista puede ser
data-filter="true" que agrega un cuadro de filtrado, data-inset="true" mejora el aspecto y data-role="list-divider" para colocar elementos (li) como divisores:Dialogs
descargar ver imagenAl mismo nivel que
page tenemos dialog, la principal diferencia entre ambos es que el primero ocupa toda la pantalla mientras que el segundo se muestra "por sobre" la pantalla anterior y tiene cierto comportamiento propio de un dialog (como el botón para cerrarlo).para invocar al
dialog, lo mismo que antes para una page, un elemento a con href="#message"Hasta aquí llegó este post introductorio, les dejo un ejemplo completo que también pueden descargarlo (el cual contiene los css y js necesarios para ejecutarse).
Si les pareció un framework interesante, les recomiendo seguir por el sitio de jquery-mobile que no tiene desperdicio.
JQuery Mobile es un buen framework, lo he estado utilizando para desarrollo la verdad te ayuda mucho.
ResponderBorrarLa version beta soluciona uno de los principales problemas que son las barras de titulo y pie estaticas, ya que al entrar al site desde el dispositivo movil no quedan bien situadas.
Una buena convinacion luego de conocer Jquery Mobile es ver como trabaja junto a PhoneGap, para realizar aplicaciones que se ejecuten en el dispositivo con interfaz html.
Buen post introductorio.
Muy interesante, practico y facil de empezar a utilizar.
ResponderBorrarUn tip acerca del navbar que note en el ejemplo y busque como solucionarlo:
La pagina seleccionada no queda como activa (highlight), requiere de 2 clicks para que quede. La solucion es setear a "#" el href del anchor seleccionado y agregarle la siguientes clases:
class="ui-btn-active ui-state-persist"
Saludos!!
Gracias Christian!, si, creo que para la versión 1.1 lo están revisando ese tema, porque sería de esperar que lo resuelva el mismo framework.
Borrar