jquery - 如何在 jquery ui 对话框小部件上设置焦点？

Question

我计划在一个页面上有多个无模式对话框。我希望当一个对话框被点击时，它会得到这个.ui-state-focus类，并且当它被点击时它会被删除，这样我就可以轻松地设置一个活动/非活动对话框的样式。我基本上想改变它的边框颜色。

我正在使用 jqueryUI 1.10，不幸的是，我无论如何都看不到仅使用 CSS 来设置对话框的样式焦点。

添加此功能的最佳方法是什么？我愿意基于原始对话框小部件派生一个新的对话框小部件，但希望就如何最好地编写代码提供一些建议。

Answer 1

像这样的东西：

$('.ui-dialog').on('click', function() {
    $('.ui-dialog').removeClass('ui-state-focus');
    $(this).addClass('ui-state-focus');
});

如果用户单击任何对话框以外的任何内容，则删除焦点：

$(document).on('click', function(e) {
    var $target = $(e.target);
    if(!$target.hasClass('ui-dialog') && $target.parents().hasClass('ui-dialog')) {
        $('.ui-dialog').removeClass('ui-state-focus');
    }
});