Latest web development tutorials

Botón jQuery Mobile

Las aplicaciones móviles se basan en el simple clic de las cosas que desea mostrar.





Crear un botón en jQuery Mobile

En jQuery móvil, el botón se puede crear en tres formas:

  • Uso <button>
  • Uso elemento <input>
  • Utilice <a> elementos con los datos-role = "botón" de

<Botón>

<button>按钮</button>

Trate »

<Entrada>

<input type="button" value="按钮">

Trate »

<a>

<a href="#" data-role="button" >按钮</a>

Trate »

lámpara En jQuery Mobile, el botón se labra de forma automática, hacerlos más atractivos y la disponibilidad en los dispositivos móviles. Recomendamos que utilice elementos <a> con "botón" de la función de enlace de datos =, utilizar los elementos <input> o <> elemento entre las páginas de formulario de envío.


botones de navegación

A tal efecto en el botón de enlace entre las páginas, utilice <a> elementos con los datos-role = "botón de" propiedad:

Ejemplos

< a href="#pagetwo" data-role="button" >访问第二个页面</a>

Trate »


botón de línea

De forma predeterminada, el botón ocupa todo el ancho de la pantalla. Si quieres un contenido sólo tan ancho como un botón, o si desea mostrar dos o más botones al lado del otro, agrega los datos-inline = "true":

Ejemplos

<a href="#pagetwo" data-role="button" data-inline="true" >访问第二个页面</a>

Trate »


Una combinación de botones

jQuery Mobile proporciona una forma sencilla de combinar un botón.

Por favor, ponga data-role = "grupo control" y los atributos de tipo de datos = "horizontal | vertical" se utilizan juntos para especificar si las combinaciones horizontales o verticales de botones:

Ejemplos

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

Trate »

lámpara Por defecto, los botones son una combinación de composición vertical, sin margen y el espacio entre ellos. Y sólo los primeros y últimos botones son redondeados, de modo que cuando se combinan juntos para crear un hermoso aspecto.


botón Atrás

Para crear un botón Atrás, utilizar datos propiedad rel = "atrás" (que ignora el valor href ancla):

Ejemplos

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

Trate »


Más enlaces instancia de botón

categoría descripción Ejemplos
ui-btn-b Modificar botón de color es negro, la fuente es de color blanco (fondo gris por defecto, fuente negro). probar
ui-esquina-todo Botón para añadir esquinas redondeadas probar
ui-mini Hacer pequeños botones probar
ui-sombra Botón para añadir una sombra probar

nota Si usted necesita más estilos, cada clase de estilo separadas por un espacio, tales como: class = "ui-btn btn-ui ui-inline-btn-esquina-toda-ui sombra"

De forma predeterminada, el botón <input> tiene las esquinas redondeadas y efecto de sombra. <a> y los botones <> no.

clases CSS más completos, por favor ver nuestro Manual de jQuery Mobile CSS Referencia de las clases .

En la siguiente sección se muestra cómo agregar un icono en el botón.