Usuario:Juanda/jquerymobile/sintaxis

= Sintaxis y elementos =

Page

 * Es la unidad principal en jQuery Mobile
 * Un documento html puede estar formado por una page y hacer peticiones de otras pages al servidor mediante ajax.
 * Un documento html puede estar formado por varios pages y el framework cambiará de uno a otro sin hacer peticiones al servidor.
 * Las transiciones entre pages pueden estar animadas.

Dentro del container page, puede ir cualquier código html pero la estructura típica es:

Consideraciones

 * Cualquier petición a la web mediante un clic en un enlace o un envío de formulario se transforma en una petición ajax para evitar la recarga completa de la página
 * Se usa hash para guardar la historia de navegación por la web para todas las páginas ajax. Esto tiene la limitación de que no permite usar enlaces internos del tipo (index.html#foo) porque jQuery MObile buscará un "page" con id #foo.
 * El atributo id de todos los elementos debe ser único para todas las páginas del sitio web ya que el modelo de navegación de jQuery permite tener varias páginas presentes en el DOM al mismo tiempo.
 * Se puede hacer un prefetch/caché de los enlaces presentes en la página para una navegación más rápida.
 * Se pueden configurar transiciones entre las cargas.

Páginas modales

 * Cualquier page con el atributo data-rel="dialog"
 * Podemos hacer algún tipo de transición mediante el atributo data-transition="pop" (otros valores: flip, slidedown, turn, flip, fade, none....)
 * La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
 * Un usuario puede migrar de SO incluso utilizar varios
 * La experiencia de usuario podría variar entre dispositivos en función de las características y capacidades de los dispositivos


 * Varios equipos de desarrollo no siempre es la mejor opción, por las necesidades de coordinación inherentes.

Widgets

 * Demostración de los distintos widgets

ThemeRoller

 * Uso de ThemeRoller al igual que en jQueryUI para dar el diseño de los elementos.
 * Podemos utilizar hasta 26 swatches o diseños de contenidos, toolbar y botones. Basta con añadir data-theme="e" a un elemento para aplicarle el theme e.
 * Hay herencia de theme del page a los elementos (el header y el footer no, por defecto el swatch a).