Botones en jQuery Mobile

Contactar con el profesor

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

  • ui-btn-icon-bottom
  • ui-btn-icon-left
  • ui-btn-icon-right
  • ui-btn-icon-top
  • ui-btn-icon-notext (el tamaño del botón se ajustará al tamaño del icono)

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>
← data-position="fixed" en jQuery Mobile
formularios en jQuery Mobile →

Aviso Legal | Política de privacidad