Barra de herramientas de jQuery Mobile
elementos de la barra de herramientas que normalmente se encuentra en la cabeza y la cola - hacen que la navegación fácil acceso a:
Head Bar
columna de cabeza contiene normalmente la página de título / logotipo o uno o dos botones (normalmente la página de inicio, o la opción de búsqueda).
Puede añadir botones al lado izquierdo o derecho de la cabeza.
El siguiente código añade un botón a la izquierda de la cabeza del texto del título, añadir un botón a la derecha de la cabeza del texto del título:
Ejemplos
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left"> principal </a>
<H1> Bienvenido a mi página de inicio </ h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left"> búsqueda </a>
</ Div>
Trate »
El siguiente código añade un botón a la izquierda de la cabeza del texto del título:
Ejemplos
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left"> principal </a>
<H1> Bienvenido a mi página de inicio </ h1>
</ Div>
Trate »
Sin embargo, si se pone el botón de enlace se coloca después de los <h1> elemento no será capaz de mostrar el texto a la derecha. Para añadir un botón a la derecha de la cabeza del título, especifique la clase como "ui-btn-derecha":
Ejemplos
<H1> Bienvenido a mi página de inicio </ h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left"> búsqueda </a>
</ Div>
Trate »
 | Header puede contener uno o dos botones, la cola sin limitación. |
|---|
barra de cola
Más flexible que la barra de encabezado de la columna trasera - lo largo de sus páginas más funcionales y variabilidad, puede contener tantos botones:
Ejemplos
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Sígueme en Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Sígueme en Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Sígueme en Instagram </a>
</ Div>
Trate »
Nota: La cola y la cabeza estilo diferente (sin relleno y el espacio, y el botón no está centrada). Podemos utilizar un patrón simple de resolver este problema:
También puede utilizar el botón en las combinaciones horizontales o verticales traseros:
Ejemplos
<Div data-role = "grupo control " de tipo de datos = "horizontal">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Sígueme en Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Sígueme en Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Sígueme en Instagram </a>
</ Div>
</ Div>
Trate »
Colocación de la barra barra de cabeza y la cola
Cabeza y la cola pueden ser colocados en tres formas:
- Inline - por defecto. Estados barra de encabezado interior y contenido de la barra y la página trasera.
- Fijo - Bar de cabeza y la cola barra fija a la parte superior e inferior de la página.
- Pantalla Completa - modo de posicionamiento fijo es básicamente el mismo con la barra de cabeza y la cola barra fija a la parte superior e inferior de la página. Pero cuando estaba fuera de la pantalla cuando se desplaza la barra de herramientas no se mostrará de nuevo automáticamente, a menos que toque la pantalla, qué categoría de imagen o vídeo se ha planteado en el sentido de la aplicación es muy útil. Tenga en cuenta que esta barra de herramientas del modo cubrirá el contenido de la página, por lo que es mejor utilizado en ocasiones especiales.
El uso de la propiedad-posición de los datos para localizar la barra de cabeza y la cola de barras:
posicionamiento en línea (por defecto)
<div data-role="footer" data-position="inline" ></div>
Trate »
El posicionamiento fijo
<div data-role="footer" data-position="fixed" ></div>
Trate »
Para permitir el posicionamiento de pantalla completa, utilice la posición de datos = "fijo", y añadir los datos de atributo son a pantalla completa al elemento:
Pantalla completa Localización
<div data-role="footer" data-position="fixed" data-fullscreen="true" ></div>
Trate »
Consejo: completa orientación se aplica a las fotos, imágenes y vídeo.
Consejo: posicionamiento fijo y la orientación de pantalla completa haciendo clic en la pantalla va a mostrar y ocultar la cabeza de la columna y la barra de cola.
más ejemplos
En los iconos de la barra de herramientas muestra única
En la barra de herramientas muestra iconos sólo se puede utilizar la clase ui-btn-icono-notext.