Question

我有一个类似于虚拟桌面的应用程序（底部水平栏中的图标）。单击图标时，将打开一个窗口（动态创建）。如果你点击另一个（或相同的）图标，另一个窗口打开10px，从最后一个窗口打开10px，并移动到顶部。

我需要完成的是，如果您点击在另一个窗口下移动的窗口，则单击的窗口将移动到顶部。

以下是我到目前为止所得到的，但它根本不是一个好的解决方案（例如，如果你点击已经在顶部的窗口，那么函数仍会运行并且窗口上的z-index计数）。对于这个更优雅的解决方案是什么？提前谢谢！

Windows.prototype.moveOnTop = function(){

var boxes = $('.window');

    boxes.click(function() {
        var thisWindow = $(this);
        Windows.prototype.getZindex(thisWindow);
    });
}

Windows.prototype.getZindex = function(thisWindow){

    var boxes = $('.window');
    var maxZindex = 0;

    boxes.each(function() {
        var zIndex = parseInt($(this).css('z-index'), 10);
        maxZindex = Math.max(maxZindex, zIndex);
    });

    thisWindow.css("z-index", maxZindex + 1);
}

Answer 1

更优雅的解决方案将涉及一个结构（基本上是一个数组），其中包含对所有已创建窗口的引用。该结构将反映窗口的z索引，例如底部窗口位于allWindows[0]，顶部窗口位于allWindows[n-1]（其中n是窗口数。）

只要窗口（假设它在索引[3]处）获得焦点（单击），您就会首先更新此结构：

将allWindows[n-1]（当前首页窗口）移至临时保留位置
将allWindows[3]移至allWindows[n-1]（现在是顶部窗口）
在索引[3]和[n-1]之间移动每个窗口（不包括）一个位置
将窗口放在临时保留位置allWindows[n-2]（顶部下方一个）

到目前为止，没有任何可见的内容发生了变化，只是结构发生了变化：它现在的顺序正确，窗口应该是可见的。

循环遍历allWindows[3]' to allWindows [n-1]`（包括）并将z-index设置为等于结构中的索引

这样，z-index永远不会超过n-1。当然，只有当获得焦点（被点击）的窗口不是顶部窗口时才会这样做，以免浪费。

我看到你正在使用jQuery。使用a jQuery plugin pattern，您可以将此结构存储在插件中，并且您可以在点击处理程序中使用它。

Answer 2

一种方法是不将z-index提供给任何.window div，而是使用DOM节点定位。即你将点击的div移动到DOM中最顶层的位置，即作为body的最后一个孩子

即。类似的东西：

Windows.prototype.moveOnTop = function(){

    $('.window').click(function() {
        var thisWindow = $(this);
        if(thisWindow.next().length > 0) thisWindow.appendTo('body');
    });

};

但您需要确保没有为任何z-index div指定.window。

Answer 3

您可以让一些经理类查看当前窗口，并交换索引而不是计数。这是一种更优雅的方式。

否则，您可能希望创建一个包含当前索引的算法。因此，您需要将一个窗格置于顶部，同时降低其他窗格。

应该可以在其z-index上找到一个图层。所以这不应该那么难。

Answer 4

由于每次添加新窗口时都会调用Windows.prototype.moveOnTop，因此click处理程序将堆叠以用于以前创建的窗口。例如。创建n窗口后，第一个窗口将有n个处理程序，第二个窗口将有n-1等等。

由于getZindex对我来说很好，很可能这是你问题的根源。或者不是，但无论如何，这是你想要解决的问题。修理它很容易：

$(document).on('click', '.window', function() {
    var thisWindow = $(this);
    Windows.prototype.getZindex(thisWindow);
});

这样，初始化应用程序时，窗口不一定存在。它被称为事件委托，这意味着事件将冒泡到document，这将查看被点击的元素是否与选择器（'.window'）匹配并调用处理程序确实如此。

正如之前{{3}}所述，您的函数名称有点奇怪。你没有向我们展示Windows的剩余部分，但它显然没有与DOM绑定。基于这种猜测，我认为这可能更合适：

删除Windows.prototype.moveOnTop。

将getZindex重命名为更准确的描述性名称，例如：

Windows.prototype.moveToTop = function(thisWindow){
    var boxes = $('.window');
    var maxZindex = 0;

    boxes.each(function() {
        var zIndex = parseInt($(this).css('z-index'), 10);
        maxZindex = Math.max(maxZindex, zIndex);
    });

    thisWindow.css("z-index", maxZindex + 1);
}

无论您在何处初始化应用，请添加以下内容：

var container = '#appContainer'; // <-- the container the app is rendered into

$(container).on('click', '.window', function() {
    var thisWindow = $(this);
    Windows.prototype.moveToTop(thisWindow);
});

如果这可以解决您的问题，请告诉我们。

单击（虚拟桌面）将div移动到顶部

4 个答案: