Botones en jQuery Mobile

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Por defecto un botón ocupa el 100% de la pantalla, salvo que le añadamos el atributo:
data-inline=»true»

Botones agrupados verticalmente:

<div data-role="controlgroup">
	<button >Botón</button>
	<input type="button" value="Botón"/>
	<a href="#" data-role="button" >Button</a>
</div>

Botones agrupados horizontalmente:

<div data-role="controlgroup" data-type="horizontal">
	<button data-inline="true">Botón</button>
	<input type="button" value="Botón" data-inline="true" />
	<a href="#" data-role="button" data-inline="true">Button</a>
</div>

data-icon

<button class="ui-btn ui-icon-home ui-btn-icon-left">button text</button>

Listado de iconos disponibles: http://api.jquerymobile.com/icons/

El código que determina las imágenes de los iconos es un código que define una imagen en formato SVG embebido dentro de la propia hoja de estilos, por lo que no será necesario cargar las imágenes como foto.

class que determinan su posición dentro del botón

Custom data icon

<style type="text/css">
.ui-icon-twitter:after{
	background-image: url(images/twitter.png);
	background-color: red;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
</style>

<button data-icon="twitter" data-iconpos="bottom"></button>

Ajustar una foto al botón que la contiene

<style type="text/css">
	section#firstpage div a{
		background-image: url(images/twitter.png);
		background-size: 100% 100%;
	}
</style>

<section id="firstpage" data-role="page">
	<div data-role="content">
		<a href="#" data-inline="true" data-role="button" data-iconpos="bottom"></a>
	</div>
</section>

Ajustar un icono al botón que lo contiene

<style type="text/css">
	section#firstpage div a{
		background-image: url(images/twitter.png);
		background-size: 100% 100%;
	}
</style>

<section id="firstpage" data-role="page">
	<div data-role="content">
		<a href="#" data-inline="true" data-role="button" data-iconpos="bottom"></a>
	</div>
</section>