Botones de jQuery Mobile

Las aplicaciones móviles se construyen sobre la conveniencia de las operaciones táctiles.

Crear botones en jQuery Mobile

Los botones en jQuery Mobile se pueden crear de tres formas:

  • Se utiliza el elemento <button>
  • Se utiliza el elemento <input>
  • Se utiliza el elemento <a> con data-role="button"

<button>

<button>botón</button>

Prueba personalmente

<input>

<input type="button" value="Botón">

Prueba personalmente

<a>

<a href="#" data-role="button">Botón</a>

Prueba personalmente

Consejo:Los botones en jQuery Mobile obtienen estilos automáticamente, lo que mejora su interactividad y accesibilidad en dispositivos móviles. Recomendamos que utilice elementos <a> con data-role="button" para crear enlaces entre páginas, mientras que los elementos <input> o <button> se utilizan para envíos de formularios.

Botones de navegación

Si desea enlazar páginas a través de botones, utilice el elemento <a> con data-role="button":

Ejemplo

<a href="#pagetwo" data-role="button">Ir a la página dos</a>

Prueba personalmente

Botones en línea

Por defecto, los botones ocupan toda la anchura de la pantalla. Si necesita que los botones se ajusten a su contenido o si necesita que dos o más botones se muestren alineados, agregue data-inline="true":

Ejemplo

<a href="#pagetwo" data-role="button" data-inline="true">Ir a la página dos</a>

Prueba personalmente

Botones combinados

jQuery Mobile ofrece métodos simples para la combinación de botones.

Combine el atributo data-role="controlgroup" con data-type="horizontal|vertical" para definir la combinación de botones en horizontal o vertical:

Ejemplo

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Botón 1</a>
  <a href="#anylink" data-role="button">Botón 2</a>
  <a href="#anylink" data-role="button">Botón 3</a>
</div>

Prueba personalmente

Consejo:Por defecto, los botones combinados están organizados verticalmente, sin márgenes ni espacios entre ellos. Además, solo el primer y el último botón tienen esquinas redondas, creando así una apariencia atractiva.

Botón de regreso

Si desea crear un botón de regreso, utilice el atributo data-rel="back" (ignorará el valor de href del ancla):

Ejemplo

<a href="#" data-role="button" data-rel="back">Volver</a>

Prueba personalmente

Más a menudo utilizado para los atributos data-* de los botones

Atributo Valor Descripción Ejemplo
data-corners true | false Determinar si el botón tiene esquinas redondeadas. Pruebas
data-mini true | false Determinar si es un botón pequeño. Pruebas
data-shadow true | false Determinar si el botón tiene sombra. Pruebas

Para obtener información completa sobre los atributos data-* de jQuery Mobile, visite nuestra Manual de referencia de atributos de datos de jQuery Mobile.

La siguiente sección muestra cómo agregar íconos a los botones.