barra de navegación jQuery Mobile
Barra de navegación es un conjunto de enlaces dispuestos horizontalmente composición, que contiene típicamente dentro de la cabeza o la cola.
Por defecto, los enlaces en la barra de navegación se convertirán automáticamente en el botón (sin data-role = "botón").
El uso de data-role = "navbar" atributo para definir la barra de navegación:
Ejemplos
<div data-role="navbar" >
<ul>
<li><a href="#anylink">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
Trate »
 | Por defecto, la anchura del botón y su contenido de la misma. Utilice una lista desordenada para dividir uniformemente la anchura de botones: un botón para 100% de la anchura de dos botones de cada una el 50% de la anchura de tres botones cada representaron el 33,3% de la anchura, y así sucesivamente. Sin embargo, si se especifica más de cinco botones en la barra de navegación será dividido en varias líneas (Ver "Más ejemplos"). |
|---|
iconos de los botones de navegación
Podemos usar el atributo de icono de datos para agregar iconos de los botones de navegación:
los datos de atributo-icono con la sección de clase CSS del icono con el mismo valor. clase CSS a utilizar class = "ui-valor en iconos" , los datos-icono de atributo para utilizar los datos-icon = "valor".
| propiedad Valor | descripción | icono |
|---|---|---|
| datos-icon = "casa" | casa | |
| datos-icon = "flecha-r" | En la flecha hacia la derecha | |
| datos-icon = "buscar" | búsqueda |
Para un manual de referencia completa para todos los iconos de los botones de jQuery Mobile, visite nuestro Manual de Referencia de iconos de jQuery Mobile .
icono de ubicación
Al igual que "la posición ui-btn-icono-" misma categoría (sección de iconos se describe en detalle), se puede establecer la ubicación del icono que se muestra: la parte superior (cabeza), derecho (a la derecha), inferior (abajo) o hacia la izquierda (a la izquierda ).
Se proporciona la ubicación del icono en la barra de navegación de contenedores, utilizando la ficha iconpos atributo para especificar la ubicación:
| propiedad Valor | descripción | Ejemplos |
|---|---|---|
| ficha iconpos = "top" | Alinee el icono de la parte superior | probar |
| ficha iconpos = "right" | Icono de la derecha Alineados | probar |
| ficha iconpos = "inferior" | Alinee el icono inferior | probar |
| ficha iconpos = "left" | Alinee el icono de la izquierda | probar |
| Por defecto, el icono se encuentra por encima del texto botones de navegación (ficha iconpos = "top"). |
|---|
botón de activación
Cuando se hace clic en un enlace en la barra de navegación, que conseguirá el aspecto seleccionado (pulsado).
Si usted quiere conseguir esta apariencia no haga clic en el enlace, utilizar class = "ui-btn-activa":
Por varias páginas, es posible que desee comprobar el aspecto de cada botón en nombre de la página actual, el usuario se encuentra. Para ello, agregue "ui-estado-persisten" y el enlace "ui-btn-activa" a la clase:
más ejemplos
barra de navegación de contenido
¿Cómo agregar la barra de navegación dentro del data-role = "contenido".
Cola barra de navegación
¿Cómo agregar la barra de navegación en la parte trasera.
icono de objetivo en la barra de navegación
Cómo localizar el icono de la barra de navegación en la cola.
Más de cinco botones
10 Botón Demo en la barra de navegación.