Reemplazar el icono Cerrar por un cuadro de diálogo JQueryUI

Después de una extensa búsqueda sobre este tema, no he podido encontrar una respuesta, así que espero que alguien me pueda ayudar con este problema. Tengo un cuadro de diálogo relativamente básico:Reemplazar el icono Cerrar por un cuadro de diálogo JQueryUI

$("#dialog-search").dialog({ 
    resizable: false, 
    height:dimensionData.height, 
    width: dimensionData.width, 
    modal: true, 
    title: dimensionData.title, 
    position: [x,y], 
    open: function() { 
     $("#dialog-search .dateField").blur(); 
    }, 
    close: function(event, ui){ 
     callBack(event,ui); 
    } 
});

Lo que quiero hacer es reemplazar el icono X (ui-icon-cierre) con un icono diferente proporcionada por la interfaz de usuario (UI-icono-menos), de modo que al hacer clic en el ícono de menos se cierra el diálogo. He visto publicaciones sobre cómo ocultar el icono o reemplazarlo con una imagen personalizada en css, pero aún no he encontrado una forma de reemplazar el ícono con otro ícono para realizar la misma funcionalidad.

Editar: También quiero poder usar ui-icon-close para una funcionalidad diferente en mi cuadro de diálogo agregando un comportamiento/ubicación personalizada, pero eso puede estar fuera del alcance de esta pregunta. No dude en abordar esto si se trata de una solución relacionada, sin embargo.

Fuente

2011-10-26 Axle

Intente ver la estructura del diálogo y no debería ser difícil hacerlo.

http://jqueryui.com/demos/dialog/#theming

Uso caso create para cambiar la clase del botón con el icono cerca de la clase de otro icono va a hacer.

http://jsfiddle.net/Quincy/kHU2M/1/

$("#dialog-search").dialog({ 
    create: function(event, ui) { 
     var widget = $(this).dialog("widget"); 
     $(".ui-dialog-titlebar-close span", widget) 
      .removeClass("ui-icon-closethick") 
      .addClass("ui-icon-minusthick"); 
    } 
});

Fuente

2011-10-27 01:34:55 Quincy

Gracias, voy a ver esto. Es realmente frustrante que javascript sea tan obtuso que tienes que eliminar y agregar una clase solo para lograr una simple sustitución de la imagen. – Axle

¿Pero cómo agrego mi propia imagen? Para crear una clase de CSS que utiliza background-image: ... doesnt realmente funciona, simplemente lo arruina todo. ¿Hay un tutorial para intercambiar la X por otra cosa completamente, no una de las imágenes "integradas"? Y preferiblemente más grande. – Ted

@Ted He agregado una respuesta más con una imagen personalizada. – udalmik

vieja pregunta, pero tal vez voy a ayudar a alguien. Después de CSS hizo el truco para mí, totalmente personalizado Close botón UI. No muy elegante :), pero funciona bien para mí.

.ui-icon-closethick { 
    background-image: url(images/my-10px-image.png) !important; 
    background-position: left top !important; 
    margin: 0 !important; 
} 

.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick { 
    width: 10px !important; 
    height: 10px !important; 
} 

.ui-dialog .ui-dialog-titlebar-close { 
    background: none !important; 
    border: none !important; 
} 

.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover { 
    padding: 0 !important; 
}

Mi encargo botón de cierre se muestra a continuación:

Fuente

2013-03-04 14:56:22 udalmik

Reemplazar el icono Cerrar por un cuadro de diálogo JQueryUI

Respuesta

Cuestiones relacionadas