Crear botones con Jquery Mobile

Para crear botones con Jquery Mobile existen una amplia gama de atributos que permiten de una forma rápida y sencilla configurarlos para que tengan la apariencia deseada.

El principal atributo es data-role el cual es el encargado de crear el elemento button ...

<a href="#" data-role="button">Botón básico</a>
<input type="submit" value="Input type submit" data-role="button" />
<input type="button" value="Input type button" data-role="button" />
<input type="reset" value="Input type reset" data-role="button" />

De este modo tan simple se obtiene un botón, pero este botón simple puede aceptar múltiples atributos de diseño ...

Si se quiere que el botón aparezca desactivado, se le agrega la clase "ui-disabled" ...

<a href="#" data-role="button" class="ui-disabled">Botón desactivado</a>

Para que el botón reduzca sus dimensiones, hacemos uso de el atributo data-mini que acepta un valor boolean ...

 <a href="#" data-role="button" data-mini="true">Botón con dimensiones más pequeñas</a>

Para añadirle un icono al botón utilizamos el atributo data-icon ...

 <a href="#" data-role="button" data-icon="search" >Botón con icono</a>

Posibles valores para data-icon ...

alert
arrow-d
arrow-l
arrow-r
arrow-u
back
check
delete
forward
gear
grid
home
info
minus
plus
refresh
search
star

Para posicionar el icono en el button existe el atributo data-iconpos ...

<a href="#" data-role="button" data-icon="search" data-iconpos="right">Botón con icono a la derecha</a>
<a href="#" data-role="button" data-icon="delete" data-iconpos="left">Botón con icono a la izquierda</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="top">Botón con icono sobre el texto</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">Botón con icono bajo el texto</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Botón sin texto</a>

Posibles valores para data-iconpos ...

right -> icono a la derecha
left -> icono a la izquierda
top -> icono arriba
bottom -> icono abajo
notext -> sólo icono

Para colocar botones en línea se utilizar el atributo data-inline="true" que es boolean ...

 <a href="#" data-role="button" data-icon="home" data-iconpos="left"  data-inline="true">Botón en línea 1</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="left"  data-inline="true">Botón en línea 2</a>

Para crear grupos de botones se crea un div o contenedor y se le añade el atributo data-role con valor controlgroup. Para indicar el modo en que se organizan los elementos en su interior, en este caso botones, se le agrega el atributo data-type= vertical | horizontal ...

<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="home" data-iconpos="left" data-mini="true">Botón 1</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="left" data-mini="true">Botón 2</a>
<a href="#" data-role="button" data-icon="star" data-iconpos="left" data-mini="true">Botón 3</a>
</div>

Para cambiar el tema del botón se utiliza el atributo data-theme= a | b | c | d | e

 <a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-theme="e">Botón con nuevo tema</a>