jqueryui - Cambiar el icono de un botón de la interfaz de usuario de jQuery con su propia imagen

radio button jqueryui

Question

Actualmente tengo el siguiente botón jQuery UI:

$(''#button'').button(
  {
    label: ''Test'',
    icons: {primary: ''ui-icon-circle-plus'', secondary: null}
  }
);

Deseo usar una imagen propia para el botón llamado ''custom.png''.

¿Cómo puedo lograr eso?

Answer 1

Defina un estilo usted mismo, así:

.ui-icon-custom { background-image: url(images/custom.png); }

Entonces solo utilícelo cuando llame .button() , como este:

$(''#button'').button({
  label: ''Test'',
  icons: {primary: ''ui-icon-custom'', secondary: null}
});

Esto supone que su icono personalizado se encuentra en la carpeta de imágenes debajo de su CSS ... el mismo lugar donde se encuentra el mapa de ícono de la interfaz de usuario jQuery. Cuando se crea el ícono obtiene una clase como esta: class="ui-icon ui-icon-custom" , y esa clase ui-icon ve así (tal vez una imagen diferente, dependiendo del tema):

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

Entonces, en su estilo, usted está anulando esa background-image , si es necesario, cambie el ancho, alto, etc.

Answer 2

Eche un vistazo al comentario de Nick Craver. Probé su respuesta exactamente como está, pero aun así no me ayudó. El problema (supongo) era que la clase ui-icon-custom estaba al final de la lista de clases, y no parecía anularla a la imagen de fondo original ui-icon clase ui-icon .

Lo que hice para que funcionara fue agregar! Importante para el final del icono CSS como tal

.ui-icon-custom { background-image: url(images/custom.png) !important; }

Puede que tenga que cambiar las propiedades de alto y ancho, pero esto funcionó para mí.

Answer 3

Mira este enlace:

http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

.bouton-image { background: #004963; width: 80px; }
.ui-icon-wifi {
   width: 80px;
   height: 80px;
   background-color: #004963;
   background-image: url(../images/icones/icone_wifi_ispsm_mobile.png);
   background-position: 40% 40%;
}

<a title="" class="bouton-image" data-role="button" data-icon="wifi" data-iconpos="notext" data-inline="true"></a>

En "ícono de datos" simplemente ponga lo que desee y jquery creará la clase para usted.

Answer 4

Si solo aparece una imagen en el botón, sin etiqueta ni texto, hago esto:

$(''#button'').button();

para reemplazar este elemento de imagen para que se convierta en un botón:

<img src="images/custom.png" width="28" height="28" id="button">

Pero si prefiere seguir con la etiqueta o el texto, la explicación de tschlarm anterior es mejor.

Answer 5

Tal vez me esté perdiendo algo en el OP, pero esto funciona para mí sin muchos problemas. Puede definir el botón como DIV y poner una tabla dentro de él. No se anula el CSS y aún se pueden usar íconos definidos por jquery y tu propio ícono de tamaño personalizado. También puede colocar el ícono en cualquier lugar alrededor del texto (arriba, izquierda, derecha, etc.).

$(document).ready(function()
{
    $(''#btn'').button();
});

<div id=''btn''>
<table>
<tr>
<td><img src=''images/custom.png'' width="24" height="24" /></td>
<td>Search</td>
</tr>
</table>
</div>

Answer 6

busque el archivo jquery ui css para la clase ui-icon-circle-plus y cópielo para su propia imagen.

Answer 7

fácil o fácil

#bildwechseln {
background-image: url(''../images/my-png/bild.png'');
width: 140px;
height: 140px;}

<button id="bildwechseln"></button>

Saludos desde Alemania