Barra de navegación de jQuery Mobile

Barra de navegación de jQuery Mobile

La barra de navegación se compone de un grupo de enlaces alineados horizontalmente, que generalmente se encuentran dentro de la cabecera o el pie de página.

Por defecto, los enlaces en la barra de navegación se convierten automáticamente en botones (sin necesidad de data-role="button").

Usa la propiedad data-role="navbar" para definir la barra de navegación:

Ejemplo

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Página Principal</a></li>
      <li><a href="#anylink">Página 2</a></li>
      <li><a href="#anylink">Búsqueda</a></li>
    </ul>
  </div>
</div>

Prueba personalmente

Consejo:El ancho del botón, por defecto, es el mismo que su contenido. Usa listas no ordenadas para dividir equitativamente los botones: un botón ocupa el 100% de la anchura, dos botones comparten el 50% de la anchura, tres botones 33.3%, y así sucesivamente. Sin embargo, si defines cinco o más botones en la barra de navegación, se dobla en múltiples filas (ver "más ejemplos" en la parte inferior de la página).

Botón activo

Cuando se hace clic en los enlaces del menú de navegación, estos obtienen un aspecto seleccionado (apretado).

Si deseas lograr este aspecto sin hacer clic en la conexión, usa class="ui-btn-active":

Ejemplo

<li><a href="#anylink" class="ui-btn-active">Página principal</a></li>

Prueba personalmente

Para múltiples páginas, es posible que necesites configurar el aspecto "seleccionado" para cada botón para indicar que el usuario está navegando en esa página. Si deseas hacerlo, agrega la clase "ui-state-persist" y "ui-btn-active" a la conexión:

Ejemplo

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Página principal</a></li>

Prueba personalmente

Más ejemplos

Barra de navegación en el contenido
Cómo agregar una barra de navegación en data-role="content".
Barra de navegación en el pie de página
Cómo agregar una barra de navegación en el pie de página.
Ubicación de íconos en la barra de navegación
Cómo colocar íconos en la barra de navegación interna del pie de página.
Cinco botones o más
Muestra de diez botones en la barra de navegación.