jQueryUI对话滚动位置重置另一个对话框的焦点

时间:2014-02-09 23:31:59

标签: jquery jquery-ui scrollbar

问题:

使用实例化的多个标准jQueryUI对话框时:

$("#dialog").dialog({});
$("#dialog2").dialog({});

如果有大量内容或已设置特定高度导致滚动条,在其内部滚动后,然后聚焦相反的对话框,滚动条位置将重置在与之交互的第一个(或所有其他对话框中) 3个或更多对话框的情况。)

有关问题的演示:

http://jsfiddle.net/Drath/yGL22/

重现的步骤:

  1. 在一个对话框中滚动。
  2. 点击对面的对话框。
  3. 滚动条位置将在滚动的第一个对话框中重置。
  4. 其他

    寻找可能的解决方法,因为这似乎是一个错误。我无法使用任何选项/方法/事件组合来找到解决此问题的方法。这似乎发生在焦点事件之前,因此我无法找到使用该事件的工作。

1 个答案:

答案 0 :(得分:1)

能够在搜索查询中使用“_moveToTop”找到解决方案。这里有一个官方错误提示:http://bugs.jqueryui.com/ticket/9166

已在即将推出的jQueryUI 1.11.0版中修复。如果您在jQueryUI 1.10.4或更低版本上运行此问题,则解决方法如下:

加载jQueryUI后,通过加载以下代码覆盖_moveToTop函数:

$.widget('ui.dialog', $.ui.dialog, { _moveToTop: function( event, silent ) {
    var $parent = this.uiDialog.parent();
    var $elementsOnSameLevel = $parent.children();

    var heighestZIndex = 0;
    $.each($elementsOnSameLevel, function(index, element) {
        var zIndexOfElement = $(element).css('z-index');
        if (zIndexOfElement) {
            var zIndexOfElementAsNumber = parseInt(zIndexOfElement) || 0;
            if (zIndexOfElementAsNumber > heighestZIndex) {
                heighestZIndex = zIndexOfElementAsNumber;
            }
        }
    });
    var currentZIndex = this.uiDialog.css('z-index');

    var moved;
    if (currentZIndex >= heighestZIndex) {
        moved = false;
    } else {
        this.uiDialog.css('z-index', heighestZIndex + 1);
        moved = true;
    }

    if ( moved && !silent ) {
        this._trigger( "focus", event );
    }

    return moved;
}});

通过该票证转到用户joern.zaefferer。