Las barras de herramientas jQuery Mobile
elementos de la barra de herramientas se colocan a menudo en el interior de los encabezados y pies - para la navegación "de fácil acceso":
Barras de cabecera
La cabecera se encuentra en la parte superior de la página y por lo general contiene una página de título / logotipo o uno o dos botones (normalmente de origen, o las opciones de búsqueda).
Puede agregar botones a la izquierda y / o hacia el lado derecho en la cabecera.
El código siguiente, añadirá un botón de "Inicio" a la izquierda y un botón de "Buscar" a la derecha del texto del título de cabecera:
Ejemplo
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> Inténtalo tú mismo " El siguiente código sólo agregará un botón a la izquierda de la cabecera del título:
Ejemplo
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> Inténtalo tú mismo " El siguiente código sólo agregará un botón a la derecha de la cabecera del título:
Ejemplo
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> Inténtalo tú mismo " Una cabecera puede contener uno o dos botones, mientras que el pie de página no tiene límite.
Barras de pie de página
El pie de página se encuentra en la parte inferior de la página.
El pie de página es más flexible que la cabecera - es más funcional y cambiante a lo largo de las páginas, y por lo tanto puede contener tantos botones, según sea necesario:
Ejemplo
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> Inténtalo tú mismo " Consejo: Los botones en el pie de página no se centran de forma predeterminada. Para solucionar este problema, basta con utilizar CSS:
También puede botones de grupo en el pie de página horizontal o verticalmente:
Ejemplo
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> Inténtalo tú mismo " Posicionamiento encabezados y pies
El encabezado y el pie de página se pueden colocar de tres maneras:
- Inline - Default. Encabezados y pies de página son en línea con el contenido de la página
- Fixed - encabezados y pies quedará posicionada en la parte superior e inferior de la página
- Fullscreen - se comporta como fijos; encabezados y pies de página quedará posicionada en la parte superior e inferior, sino también sobre el contenido de la página. También es ver a través ligeramente
Utilice el atributo de posición de datos para situar los encabezados y pies 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> Inténtalo tú mismo " Posición fija
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> Inténtalo tú mismo " Para habilitar la posición de pantalla completa, posición de uso de datos = "fijo" y añadir el atributo de datos en pantalla completa al elemento:
Posición de pantalla completa
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> Inténtalo tú mismo " Consejo: La posición de pantalla completa es ideal para fotos, imágenes y vídeos.
Consejo: Al tocar la pantalla ocultar y mostrar los encabezados y pies de página para ambas posiciones fijas y pantalla completa.
Más ejemplos
Viendo sólo el icono en la barra de herramientas
Uso de la ui-btn-icon-notext clase sólo para que aparezca el icono de los botones de encabezado y pie.