jQuery Mobile proporciona un conjunto de iconos que harán que sus botones tienen un aspecto más deseable.
Añadir iconos de jQuery Mobile Botones
Para añadir un icono a su botón, utilice la ui-icon de clase, y coloque el icono con una clase de posición de icono (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
Nota: Para otros botones, como los botones en las vistas de lista y formas, se debe utilizar el atributo de icono de datos. Esto será explicado en un capítulo posterior.
A continuación ofrecemos una lista de algunos de los iconos disponibles que proporcionan jQuery Mobile:
| icono de la clase | Descripción | Icono | Ejemplo |
|---|---|---|---|
| ui-icon-arrow-l | Flecha izquierda | Intentalo | |
| ui-icon-arrow-r | Flecha correcta | Intentalo | |
| ui-icon-info | Información | Intentalo | |
| ui-icon-delete | Borrar | Intentalo | |
| ui-icon-back | Espalda | Intentalo | |
| ui-icon-audio | altavoces | Intentalo | |
| ui-icon-lock | Candado | Intentalo | |
| ui-icon-search | Buscar | Intentalo | |
| ui-icon-alert | Alerta | Intentalo | |
| ui-icon-grid | Cuadrícula | Intentalo | |
| ui-icon-home | Casa | Intentalo |
Para una referencia completa de todos los iconos de los botones de jQuery Mobile, por favor vaya a nuestro móvil iconos jQuery referencia .
Iconos de posicionamiento
Puede especificar uno de los cuatro valores para la ubicación del icono debe colocarse en el botón: top, right, bottom o left .
Utilice el ui-btn-icon clase para especificar la posición:
Icono de posición para Botones de Enlace
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
Inténtalo tú mismo " Si no se especifica la posición del icono de botones de enlace, no se mostrará el icono.
Viendo sólo el icono
Sólo para mostrar el icono, utilice "notext" como valor para la posición del icono:
Ejemplo
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-notext" >Search</a>
Inténtalo tú mismo " Extracción del Círculo
Por defecto, todos los iconos tienen un círculo gris (disco) alrededor de ellos. Para quitar el círculo, añadir el "ui-nodisc-icon" clase al elemento o su recipiente:
Ejemplo
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
Inténtalo tú mismo " Negro o blanco iconos
Por defecto, todos los iconos son de color blanco. Para cambiar el icono de color a negro, añadir el "ui-alt-icon" al elemento o su recipiente:
Ejemplo
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon" >Black</a>
Inténtalo tú mismo " Más ejemplos
Añadir el "ui-nodisc-icon" de clase a un contenedor
Un ejemplo de la "ui-nodisc-icon" clase añadido a un contenedor.
Añadir el "ui-alt-icon" de clase a un contenedor
Un ejemplo de la "ui-alt-icon" clase añadido a un contenedor.