Question

我一直在构建一个基于HTML的AIR应用程序，它使用透明窗口（不使用系统镶边）。我希望窗口有一个阴影效果，它使用JavaScript和CSS3的组合我根据窗口焦点改变阴影。当窗口最大化时，阴影将被完全移除。

应用程序如下所示（线框图）：

enter image description here

红色区域是<html>容器本身。蓝色框是应用程序内容区域（简单<div>），带绿色阴影的黑色边框是位于页面上绝对位置的容器<div>。这个黑色容器就是我设计中的应用程序。

正如您所见，黑色边框（蓝色框周围）在页面的外边缘有一个微妙的绿色阴影。

问题是因为<html>是AIR中的应用程序，这意味着应用程序永远不会触及屏幕边缘，因为AIR正在将<html>视为应用程序边缘而不是黑色边框的容器<div>。

有关如何解决此问题的任何想法？我唯一能想到的是一些疯狂的JavaScript，可能会以某种方式抵消应用程序......其他人有这个问题吗？

Answer 1

我可能没有正确理解这个问题，或者我错过了AIR的限制，但我不明白为什么你认为的解决方案会很难。

当通过拖放移动应用程序窗口时，只需将窗口放在丢弃的位置而不检查“屏幕”边界就可以了。如果你想检查边界，只需允许用户偏离边界的宽度。

当应用程序窗口最大化时，您可以使用等于边框宽度的负值来偏移应用程序容器，并向应用程序（而不是其容器）提供屏幕的宽度和高度。

由于我目前无法测试我作为AIR应用程序所说的内容，因此我将使用一些代码that you can test in jsfiddle对其进行说明。我使用jquery来简化代码。这是你的意思吗？

HTML：

<div id="appContainer">
    <div id="app">
        <a id="maximize" href="#">Maximize</a>
    </div>
</div>

CSS：

#appContainer {
    background-color: black;
    width: 106px;
    height: 106px;
    position: absolute;
}

#app {
    background-color: blue;
    width: 100px;
    height: 100px;
    margin: 3px;
}

使用Javascript：

$("#maximize").click(function(){
    var $app = $("#app");
    var $appContainer = $app.parent();
    var borderWidth = parseInt($app.css('margin'));
    $appContainer.offset({top: -borderWidth, left: -borderWidth});
    $app.width($(document).width());
    $app.height($(document).height());
});

带有Window Shadow的Adobe AIR HTML应用程序

1 个答案: