Barra de herramientas de jQuery Mobile

Barra de herramientas de jQuery Mobile

Los elementos de la barra de herramientas se colocan a menudo en la cabecera y el pie de página para lograr una navegación "ya visitada":

Barra de título

La cabecera generalmente contiene el título / LOGO de la cabecera o uno a dos botones (generalmente botones de página principal, opciones o búsqueda).

Puedes agregar botones a la izquierda o a la derecha de la cabecera.

El siguiente código agregará un botón a la izquierda del texto del título de la cabecera y otro a la derecha:

Ejemplo

<div data-role="header">
  <a href="#" data-role="button">Página principal</a>
  <h1>Bienvenido a mi página principal</h1>
  <a href="#" data-role="button">Buscar</a>
</div>

Prueba personalmente

El siguiente código agregará un botón a la izquierda del título de la cabecera:

<div data-role="header">
  <a href="#" data-role="button">Página principal</a>
  <h1>Bienvenido a mi página principal</h1>
</div>

Sin embargo, si colocas enlaces de botones después del elemento <h1>, no se mostrarán en el lado derecho del texto. Para agregar un botón a la derecha del título de la cabecera, especifica el nombre de clase "ui-btn-right":

Ejemplo

<div data-role="header">
  <h1>Bienvenido a mi página principal</h1>
  <a href="#" data-role="button" class="ui-btn-right">Buscar</a>
</div>

Prueba personalmente

Consejo:La cabecera puede contener uno o dos botones, sin embargo, el pie de página no tiene límite.

Barra de pie de página

En comparación con la cabecera, el pie de página es más flexible - es más práctico y variable, por lo que puede contener la cantidad necesaria de botones:

Ejemplo

<div data-role="footer">
  <a href="#" data-role="button">Transmitir a Weibo de Sina</a>
  <a href="#" data-role="button">Transmitir a Weibo de Tencent</a>
  <a href="#" data-role="button">Transmitir a Espacio QQ</a>
</div>

Prueba personalmente

Notas:El estilo del pie de página es diferente del de la cabecera (se restan algunos márgenes internos y espacios en blanco, y los botones no se centran). Si desea corregir este problema, configure la clase del pie de página como "ui-btn":

Ejemplo

<div data-role="footer" class="ui-btn">

Prueba personalmente

También puede elegir si desea combinar horizontal o verticalmente los botones en el pie de página:

Ejemplo

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Transmitir a Weibo de Sina</a>
    <a href="#" data-role="button" data-icon="plus">Transmitir a Weibo de Tencent</a>
    <a href="#" data-role="button" data-icon="plus">Transmitir a Espacio QQ</a>
  </div>
</div>

Prueba personalmente

Posicionar la cabecera y el pie de página

Hay tres formas de colocar la cabecera y el pie de página:

  • En línea - Por defecto. La cabecera y el pie de página estarán alineados con el contenido de la página.
  • Fijo - La página y el pie de página se mantendrán en la parte superior e inferior de la página.
  • Completa pantalla - Similar a fixed; la página y el pie de página se mantendrán en la parte superior e inferior de la página, pero también sobre el contenido de la página. También es ligeramente transparente

Utilice la propiedad data-position para posicionar la cabecera y el pie de página:

Posición en línea (por defecto)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

Prueba personalmente

Posición fija

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

Prueba personalmente

Si necesita activar la posición completa de pantalla, utilice data-position="fixed" y agregue la propiedad data-fullscreen al elemento:

Posición completa de pantalla

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

Prueba personalmente

Consejo:La opción fullscreen es muy adecuada para fotos, imágenes y videos.

Consejo:Para la posición fixed y fullscreen, tocar la pantalla ocultará y mostrará la cabecera y el pie de página.