El mejor tutorial de iconos de los botones de jQuery Mobile en 2024. En este tutorial podrás aprender Botón para añadir iconos para jQuery Mobile,icono de ubicación,Icono de Ubicación:,Mostrar sólo el icono,Ejemplo:,Retire el círculo,Ejemplos,botón negro, blanco,Ejemplos,más ejemplos,
jQuery Mobile proporciona un conjunto de botones de icono permite mirar más deseable.
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 .
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:
Si no se especifica la ubicación de la imagen del botón, no se mostrará el icono. |
Si desea mostrar el icono, se puede utilizar el "notext":
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":
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:
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".