Las aplicaciones móviles se basan en la simplicidad de tocar cosas que le desea que se muestren.
Creación de un botón en jQuery Mobile
Un botón en jQuery Mobile se puede crear en tres formas:
- Utilizando el <input> elemento
- Usando el <button> elemento con class="ui-btn"
- Utilizando el <a> elemento con class="ui-btn"
Los botones de jQuery Mobile están decoradas de forma automática, que las hace atractivas y utilizable en ambos dispositivos móviles y ordenadores de sobremesa. Recomendamos que utilice el <a> elemento con class="ui-btn" para enlazar entre páginas, y <input> o <button> elementos para el envío del formulario.
Nota: Antes de la versión 1.4, se utilizó la data-role="button" atributo para crear un botón en jQuery Mobile. A partir de 1.4, el marco de las clases de uso de CSS a los botones de estilo (a excepción de <input> botones).
Botones de navegacion
Para enlazar entre páginas mediante botones, utilice el <a> elemento con class="ui-btn" :
Botones agrupadas
jQuery Mobile proporciona una manera fácil para agrupar botones a la vez.
Utilizar el data-role="controlgroup" atributo junto con el data-type="horizontal|vertical" en un elemento contenedor, para especificar si se botones de grupo en horizontal o vertical:
Ejemplo
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
Inténtalo tú mismo " Por defecto, los botones agrupados se agrupan verticalmente sin márgenes y el espacio entre ellos. Y sólo el primero y el último botón tiene las esquinas redondeadas, lo que crea un aspecto agradable cuando se agrupan.
Botones de espalda
Para crear un botón Atrás, utilizar la data-rel="back" atributo (Nota: esto no hará caso del ancla href valor):
inline Botones
Por defecto, los botones ocupan todo el ancho de la pantalla. Si quieres un botón que sólo es tan amplia como su contenido, o si desea que dos o más botones que aparecen al lado del otro, añadir el "ui-btn-inline" clase:
Más clases CSS para Botones de Enlace
| Clase | Descripción | Ejemplo |
|---|---|---|
| ui-btn-b | Cambia el color del botón para un fondo negro con texto en blanco (por defecto es de fondo gris con el texto negro). | Intentalo |
| ui-corner-all | Añade esquinas redondeadas al botón | Intentalo |
| ui-mini | Hace que el botón más pequeño | Intentalo |
| ui-shadow | Agrega sombras al botón | Intentalo |
Si desea utilizar más de una clase, separe cada una de ellas con un espacio, como: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
De forma predeterminada, <input> botones tienen sombras y esquinas redondeadas. El <a> y <button> elemento no lo hace.
Para una referencia completa de clases CSS para los estilos comunes, visite nuestro jQuery Mobile CSS clases de referencia .
El siguiente capítulo demuestra cómo colocar iconos a los botones.