Barras de navegación jQuery Mobile
Una barra de navegación se compone de un grupo de enlaces que están alineados horizontalmente, por lo general dentro de un encabezado o pie de página:
La barra se codifica como una lista desordenada de enlaces envuelto dentro de un <div> elemento que tiene el data-role="navbar" atributo:
Ejemplo
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
Inténtalo tú mismo " Por defecto, los enlaces dentro de una barra de navegación se convertirá automáticamente en un botón (sin necesidad de class="ui-btn" o data-role="button" ).
Los botones son, por defecto, tan ancho como su contenido. Utilice una lista desordenada de dividir por igual los botones: 1 botón tiene el 100% de la anchura, 2 botones comparten el 50% cada uno, 3 botones de 33,3%, etc. Sin embargo, si se especifica más de 5 botones en la barra de navegación, que se ajustará a múltiples líneas (ver "Más ejemplos" más abajo).
Los iconos en los botones de navegación
Para añadir un icono a su botón de navegación, utilice el atributo de icono de datos:
El icono de datos de atributos de utilizar los mismos valores que las clases CSS especificadas en el capítulo "Iconos". La única diferencia es que, en lugar de especificar class="ui-icon- value " , se especifica el atributo de data-icon=" value " .
| atributo Valor | Descripción | Icono |
|---|---|---|
| data-icon="home" | Casa | |
| data-icon="arrow-r" | Flecha correcta | |
| data-icon="search" | Buscar |
Para una referencia completa de todos los iconos de los botones de jQuery Mobile, por favor vaya a nuestro móvil iconos jQuery referencia .
Iconos de posicionamiento
Al igual que con la "ui-btn-icon- position " de clase (que se especifica en el capítulo "Iconos"), donde se puede elegir el icono debe colocarse en el botón de navegación: top, right, bottom o left .
La posición del icono se establece en la barra de navegación de contenedores - no es posible posicionar cada enlace botón individual. Utilice el data-iconpos atributo para especificar la posición:
| atributo Valor | Descripción | Ejemplo |
|---|---|---|
| data-iconpos="top" | alineación de la parte superior del icono | Intentalo |
| data-iconpos="right" | alineación icono de la derecha | Intentalo |
| data-iconpos="bottom" | Icono inferior de alineación | Intentalo |
| data-iconpos="left" | alineación icono de la izquierda | Intentalo |
Por defecto, los iconos en los botones de navegación se colocan por encima del texto (data-iconpos="top") .
Botones activos
Cuando se pulsa un enlace en la barra de navegación / hace clic, se pone el seleccionado (pulsado) mira.
Para lograr este look sin tener que pulse el vínculo, utilice el class="ui-btn-active" :
Por varias páginas, es posible que desee el aspecto "seleccionado" para cada botón que representa la página que el usuario está conectado. Para ello, agregue el "ui-state-persist" la clase a sus enlaces, así como el "ui-btn-active" de clase:
Ejemplo
<li><a href="#anylink"
class="ui-btn-active ui-state-persist" >Home</a></li>
Inténtalo tú mismo " Más ejemplos
Navbars en el contenido
Cómo agregar una barra de navegación en el interior data-role="content" .
Navbars en el pie de página
Cómo agregar una barra de navegación en el interior del pie de página.
Más de 5 botones
Una demostración de 10 botones en una barra de navegación