Sostituzione dell'icona Chiudi per una finestra di dialogo JQueryUI

Dopo una ricerca approfondita su questo argomento, non sono stato in grado di trovare una risposta, quindi spero che qualcuno possa aiutarmi con questo problema. Ho una finestra di dialogo relativamente semplice:Sostituzione dell'icona Chiudi per una finestra di dialogo 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); 
    } 
});

Quello che voglio fare è sostituire l'icona X (ui-icon-stretta) con un'icona diversa fornita dal ui (ui-icon-meno), in modo che facendo clic sull'icona meno, si chiude invece la finestra di dialogo. Ho visto post su come nascondere l'icona o sostituirla con un'immagine personalizzata in css, ma non ho ancora trovato un modo per sostituire l'icona con un'altra icona per eseguire la stessa funzionalità.

Modifica: Voglio anche essere in grado di utilizzare ui-icon-close per una funzionalità diversa nella mia finestra di dialogo aggiungendo un comportamento/posizione personalizzati, ma che potrebbe essere al di fuori dell'ambito di questa domanda. Sentiti libero di affrontare questo se è una soluzione correlata, però.

fonte

2011-10-26 Axle

Prova a vedere la struttura del dialogo e non dovrebbe essere difficile farlo.

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

utilizzare l'evento create cambiare la classe del pulsante con l'icona vicino alla classe di un'altra icona farà.

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"); 
    } 
});

fonte

2011-10-27 01:34:55 Quincy

Grazie, vado a controllare questo fuori. È davvero frustrante che il javascript sia così ottuso da dover rimuovere e aggiungere una classe solo per eseguire una semplice sostituzione delle immagini. – Axle

Ma come aggiungo la mia immagine? Creare semplicemente una classe CSS che usi l'immagine di sfondo: ... non funziona davvero, ma mette tutto a posto. Esiste un tutorial per scambiare la X con qualcos'altro completamente, non una delle immagini "integrate"? E preferibilmente più grande. – Ted

@Ted Ho aggiunto un'altra risposta con l'immagine personalizzata. – udalmik

vecchia questione, ma forse ti aiuto a qualcuno. Seguendo CSS ha fatto il trucco per me, totalmente personalizzato interfaccia utente pulsante Close. Non molto elegante :), ma funziona bene per me.

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

mia abitudine pulsante di chiusura mostrato qui sotto:

fonte

2013-03-04 14:56:22 udalmik

Sostituzione dell'icona Chiudi per una finestra di dialogo JQueryUI

risposta

Problemi correlati