2011-10-10 16 views
6

Desidero definire lo stato attivo del pulsante di chiusura (nella barra del titolo) nella finestra di dialogo di jqueryUI. Ho disegnato lo stile normale e: hover state bene. Ma lo stato attivo non sembra mai attivarsi.Impossibile abilitare lo stato attivo del pulsante di chiusura della finestra di jqueryUI

C'è qualcosa nel plugin che impedisce il: stato attivo nel collegamento del pulsante di chiusura di funzionare? Può essere cambiato così funzionerà?

Ecco un esempio del problema: View example

+0

ci puoi dare alcuni esempi di quello che hai fatto che funziona e ciò che non funziona, per favore? – xaxxon

+0

Ho aggiunto un violino semplice –

+0

funziona per me su Mac Chrome più recente. Clicco (e ti tengo premuto) su di esso e diventa nero come nel CSS nella pagina dice che dovrebbe. – xaxxon

risposta

2

Conseguenza della disattivazione della selezione per TitleBar of Dialog Widget nel browser che non supporta l'evento 'selectstart'. Invece per quei browser disabilitano l'evento 'mousedown'.

linea 145: jquery.ui.dialog.js

 uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection(); 

linea 120: jquery.ui.core.js

disableSelection: function() { 
    return this.bind(($.support.selectstart ? "selectstart" : "mousedown") + 
     ".ui-disableSelection", function(event) { 
      event.preventDefault(); 
     }); 
}, 

enableSelection: function() { 
    return this.unbind(".ui-disableSelection"); 
} 

in modo da poter usare EnableSelection() o sciogliere da soli

1

Lo stato :active viene attivato solo quando viene cliccato. A quel punto il tuo dialogo si chiuderà immediatamente, quindi dubito che tu possa vedere il suo stato. Puoi fornire un esempio se questo non risponde alla tua domanda?

+0

La funzione "chiudi" non viene chiamata fino a quando non viene rilasciato il pulsante del mouse. – bricker

+0

È il: hover posizionato prima: after? : dopo deve essere: hover in the css. – JNDPNT

+0

Il problema non è il CSS. Sono alcuni eventi che vincolano il codice di dialogo. Se non si rilevano tutti gli eventi nella barra del titolo della finestra di dialogo, lo stato attivo funzionerà. Semplicemente non so esattamente quale sia l'evento il problema. –

1

Considerati i commenti di @Bizniztime, perché non farlo in javascript?

$(".ui-dialog-titlebar-close").mousedown(function() { 
    $(this).css("background", "#000"); 
}).mouseover(function() { 
    $(this).css("background", "#0F0");  
}).mouseout(function() { 
    $(this).css("background", "#F00");  
}); 

Si potrebbe anche aggiungere/rimuovere le classi ...

Problemi correlati