Change style of jQuery Dialog title bar when got/lost focus

I'm trying to make a simple page with two jQuery Dialogs with the functionality of changing their titlebar colour when each gets or losts focus. In other words, focused window has a different titlebar colour which makes it easier to differ which has focus. I have this code:

$(function () {
  $(".window").dialog({
    focus: function (even开发者_Python百科t, ui) {
      $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
    }
});

but I don't know how to detect in the focus event whether it it gets or losts focus.

Try this

http://jsfiddle.net/JqQA6/

I needed the same and this solution works.

Try focusin() and focusout()

The dialog focus event is only called on gaining focus. Stock jQuery UI dialog boxes have no concept of losing focus.

A simple solution is to simply remove your ui-state-error class from every dialog in the focus handler and then add it to the one that's just received focus.

I've actually written a full-featured jQuery UI plugin which adds a .blur event to dialog boxes, and handles re-ordering stacked boxes whenever the topmost box is closed. I'll check if I'm allowed to publish it.