jueves, 21 de febrero de 2013

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>

Jquery Mobile


Posibles valores para data-icon ...

alertAttached Image
arrow-dAttached Image
arrow-lAttached Image
arrow-r Attached Image
arrow-u Attached Image
back Attached Image
check Attached Image
delete Attached Image
forward Attached Image
gear Attached Image
grid Attached Image
home Attached Image
info Attached Image
minus Attached Image
plus Attached Image
refresh Attached Image
search Attached Image
star Attached Image



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>