Latest web development tutorials

iconos de los botones de jQuery Mobile

jQuery Mobile proporciona un conjunto de botones de icono permite mirar más deseable.





Botón para añadir iconos para jQuery Mobile

Podemos utilizar la interfaz de usuario-icono de la clase para agregar un icono para el botón y el botón se puede establecer utilizando la clase especificada.

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

Nota: En los otros botones manera, como una lista o una forma de botones utilizan-icono de datos de atributos. En la siguiente sección vamos a introducir específica.

A continuación se enumeran algunos de los iconos disponibles jQuery Mobile ofrece:

clase Button descripción pulsador Ejemplos
ui-icon-flecha-l Flecha izquierda probar
ui-icon-flecha-r flecha hacia la derecha probar
ui-icon-info información probar
ui-icon-eliminar borrar probar
ui-icon-back retiro probar
ui-icon-audio altavoz probar
ui-icono de bloqueo candado probar
ui-icon-búsqueda búsqueda probar
ui-icon-alerta advertencia probar
ui-icono de la red malla probar
ui-icon-casa casa probar

Para un manual de referencia completa para todos los iconos de los botones de jQuery Mobile, visite nuestro Manual de Referencia de iconos de jQuery Mobile .


icono de ubicación

También puede especificar un icono posicionado en el botón qué posición: la parte superior (arriba), lado derecho (a la derecha), en la parte inferior (abajo), la izquierda (a la izquierda).

Utilice el icono-ui-btn atributo para especificar la ubicación:

Icono de Ubicación:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top"> superior </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right"> lado derecho </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom"> </a> inferior
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> lado izquierdo </a>

Trate »

nota Si no se especifica la ubicación de la imagen del botón, no se mostrará el icono.

Mostrar sólo el icono

Si desea mostrar el icono, se puede utilizar el "notext":

Ejemplo:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext"> Buscar </a>

Trate »

Retire el círculo

Por defecto, todos los iconos tienen un círculo gris. Si no lo necesita, puede utilizar la categoría de elemento "-NoDisc-icono de la interfaz de usuario":

Ejemplos

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> utilización círculo (por defecto) </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon"> quitar el círculo </a>

Trate »

botón negro, blanco

Por defecto, todos los iconos son de color blanco. Si necesita cambiar el color del icono es de color negro, se puede añadir "ui-alt-icono" en los elementos:

Ejemplos

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> blanco </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon"> Negro </a>

Trate »

Ejemplos

más ejemplos

Añadir "ui-NoDisc-icono de" clase al contenedor
Ejemplo de clase "ui-NoDisc-icono".

Añadir "ui-alt-icono de" clase al contenedor
Ejemplo de clase "ui-alt-icono".