jQuery Mobile: Toolbars

[Fuente: http://jquerymobile.com/test/docs/toolbars/docs-bars.html]

Tipos de Toolbar

En jQuery Mobile, hay dos tipos de standars de toolbars: Cabeceras (Headers) y Pies (Footers).

  • La Header bar sirve como el título de la página, es generalemente el primer elemento dentro de cada página de una web de movilidad, y tipicamente contiene el título de la página y hasta dos botones.
  • El Footer bar es generalmente el ultimo elemento dentro de cada pagina de una web de movilidad, y tiende a estar más abierta en términos de contenidos y funcionalidad, pero tipicamente contiene una combinación de textos y botones.

Es muy común tener una barra de navegación horizontal o tab bar dentro del header o del footer; jQuery Mobile inclute el navbar widget que convierte un lista no-ordenada de links en una botonera horizontal, que funcione bien en estos casos.

Ver el  data- attribute reference para ver todas los posibles atributos que se pueden poner con las toolbars.

Opciones de posicionamiento de las Toolbar

Las headerss y los footers pueden ser posicionados en las páginas de varias formas distintas. Por defecto, las toolbars utilizan el modo de posicionamiento “inline”. En este modo, las headers y el footer se colocan en el flujo de documento natural (el comportamiento HTML por defecto), lo cual te asegura que van a ser visibles en todos los dispositivos, independientemente del código Js o CSS de posicionamiento que tenga.

El modo de posicionamiento “fixed” positioning mode fija las toolbars arriba o al fondo del viewport de los navegadores que soportan CSS fixed positioning (la mayoria de los browsers los incluyen). Las browsers que no lo soportan , las toolbars tendrán la posición static e inline de la página.

Cuando el tap-toggling esta activo, tapping la pantalla cambiará la visibilidad de las toolbars fixed. Tapping the page cuando las toolbars no están visibles las muestra de nuevo. Tapping otra vez las esconde. Esto le da a los usuarios la opción de esconder las toolbars hasta que las necesiten y maximizar los contenidos centrales de la pagina. Un inconveniente de las fixed toolbars es que nunca realmente se esconden, porque cambian entre modo de posicionamiento fixed y static. Esto quiere decir que si estas arriba de la pagina, no puedes esconder el header toolbar haciendo tap-toogle, porque lo que hace en su vez es cambiar a su punto en el documento en el top de la página. Lo mismo pasa con los fixed footers si estamos al fondo de la página.

Para obtener este comportamiento del header y el footer , añade el atributo  data-position="fixed" al elemento header o footer.

Un modo de posicionamiento “fullscreen” “fullscreen” position mode funciona como el modo fixed excepto que las toolbars solapan el contenido de la página, más que ocupar un espacio en el documento cuando no están en modo fixed. Esto es útil para apps de inmersión como son visores de fotos o videos donde quieres que el contenido rellene toda la pantalla y la toolbars puedan ser escondidas o invocadas a aparecer haciendo un toque (tapping) de la pantalla. Recuerda que las toolbars en este modo se pondrán sobre el contenido de la página asi que es mejor que sea utilizada en situaciones especificas.