Actualmente tengo el siguiente jQuery UI button:

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

Deseo utilizar propia imagen para el botón de llamada personalizados.png’.

¿Cómo puedo lograr eso?

7 Comentarios

  1. 32

    Definir un estilo de ti mismo, de esta manera:

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

    A continuación, sólo lo utilizan cuando se llama a .button(), como este:

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

    Esto supone que su icono personalizado en la carpeta de imágenes de debajo de tu CSS…en el mismo lugar que la interfaz de usuario jQuery icono de mapa normalmente es. Cuando el icono creado se obtiene de una clase como esta: class="ui-icon ui-icon-custom", y que ui-icon clase se parece a esto (tal vez una imagen diferente, dependiendo del tema):

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

    Por lo que en su estilo que usted está a solo primordial que background-image, si es necesario cambiar el ancho, la altura, etc.

    • cambiar el tamaño de los iconos de más de 32 o así que no es trivial y, además, hay un bug en la versión 1.8.1 : bugs.jqueryui.com/ticket/5603
  2. 34

    Echa un vistazo a Nick Craver del comentario. Traté de que su respuesta es exactamente como es, pero todavía no me ayudan. El problema (supongo) era que la ui-icon-custom clase estaba en el final de la lista de la clase, y no parece reemplazar a la original ui-icon clase de imagen de fondo.

    Lo que hice para conseguir que el trabajo fue agregar !importante para el final del icono de la css como

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

    Usted podría tener que cambiar las propiedades height y width, pero esto funcionó para mí.

    • Que el último cambio realizado un trabajo para mí también.
    • El último cambio que hizo por mí demasiado después de pelear con él durante horas.
    • Este nuevo 🙂 y este último cambio me salvó horas de frustración.
    • Otra forma de esta obra sin usar !es importante para aumentar la especificidad del selector de .ui-state-default .ui-icon-custom debería funcionar. La razón por la que esto funciona es que en jquery.la interfaz de usuario.tema.css, el selector es: .ui-state-default .ui-icon. Mediante el uso de sólo una clase en el selector de CSS va a ser menos específico que el tema jQuery y no será aplicado. coding.smashingmagazine.com/2007/07/27/… Usted también puede necesitar para asegurarse de que su archivo CSS se carga después de jquery.la interfaz de usuario.tema.css (de Acuerdo a la <link /> etiquetas en HTML)
    • Para su referencia, la definición de jquery.la interfaz de usuario.tema.css se encuentra aquí (Que probablemente cambiarán a medida que el archivo está actualizado).
  3. 5

    Tal vez me estoy perdiendo de algo en la OP, pero este a mi me funciona sin mucho problema. Puede definir el botón como un DIV y poner una mesa en el interior. No primordial de css y todavía se puede utilizar tanto para jquery definido iconos y su propio tamaño personalizado icono. También puede colocar el icono en cualquier lugar en todo el 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>
    • Buena respuesta, lo que da un mejor control de la apariencia de botón sin dejar de tomar ventaja de jQuery UI .botón() construir.
    • Esta respuesta es simple, sencillo y trabajó como un encanto. Muchas gracias.
    • esto es tan exagerado, ¿por qué no usar <botón>? es mucho menos trabajo y mucho más limpia que el uso de voluminosos tablas.
    • cualquier ejemplo para ilustrar su idea?
  4. 1

    de búsqueda de la interfaz de usuario jquery archivo css para el ui-icon-circle-plus clase luego copiar para su propia imagen.

  5. 1

    Si sólo una imagen para mostrar en el botón, sin etiqueta o texto, hago esto :

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

    para reemplazar este elemento de imagen para convertirse en un botón :

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

    Pero si usted prefiere el siguiente texto o etiqueta, tschlarm explicación anterior es mejor.

  6. 0

    Consulte este enlace:

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

    CSS:

    .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%;
    }

    HTML:

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

    En el «data-icon» acaba de poner lo que quiera y jquery va a crear la clase para usted.

  7. -1

    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

Dejar respuesta

Please enter your comment!
Please enter your name here