带有Window Shadow的Adobe AIR HTML应用程序
[英]Adobe AIR HTML Application with Window Shadow
问题描述
I have been building a HTML based AIR application that uses a transparent window (doesn't use the system chrome). 
我一直在构建一个基于HTML的AIR应用程序，它使用透明窗口（不使用系统镶边）。 I want the window to have a drop-shadow effect which using a combination of JavaScript and CSS3 I make the shadow change depending on window focus. 我希望窗口有一个阴影效果，它使用JavaScript和CSS3的组合我根据窗口焦点改变阴影。 And when the window is maximised the shadow will be removed completely. 当窗口最大化时，阴影将被完全移除。
The application looks like the following (wireframe diagram): 该应用程序如下所示（线框图）：
The red area is the <html> container itself. 红色区域是<html>容器本身。 The blue box is the application content area (a simple <div> ) and the black border with green shadow is a container <div> that is positioned absolute on the page. 蓝色框是应用程序内容区域（简单的<div> ），带有绿色阴影的黑色边框是在页面上绝对定位的容器<div> 。 This black container is the application itself in my design. 这个黑色容器是我设计中的应用程序。
As you can see the black border (around the blue box) has a subtle green shadow in the outer edges of the page. 如您所见，黑色边框（蓝色框周围）在页面的外边缘有一个微妙的绿色阴影。
The problem is that because the <html> is the application in AIR it means that the application can never touch the edge of the screen due to the fact that AIR is treating the <html> as the application edge rather than the container <div> for the black border. 问题是因为<html>是AIR中的应用程序，这意味着应用程序永远不会触及屏幕边缘，因为AIR将<html>视为应用程序边缘而不是容器<div>为黑色边框。
Any ideas on how to get around this? 关于如何解决这个问题的任何想法？ The only thing I could think of was some crazy JavaScript that could offset the application somehow.... Anyone else had this problem? 我唯一能想到的是一些疯狂的JavaScript，可能会以某种方式抵消应用程序......其他人有这个问题吗？
1 个解决方案
解决方案1
0 2014-06-07 17:29:17
I probably don't understand the question correctly, or maybe I am missing a limitation of AIR, but I don't see why the solution you think of would be hard. 我可能没有正确理解这个问题，或者我错过了AIR的限制，但我不明白为什么你想到的解决方案会很难。
When the application window is moved with a drag-and-drop, simply leaving the window where it is dropped without checking "screen" bounds will work. 当通过拖放移动应用程序窗口时，只需将窗口保留在放置它的位置而不检查“屏幕”边界将起作用。 If you do want to check the bounds, simply allow the user to be off-bounds by the width of the border. 如果您确实想要检查边界，只需允许用户通过边框的宽度进行边界检查。
When the application window is maximized, you can offset the application container with negative values equal to the border width, and give to the application (rather than its container) the width and height of the screen. 当应用程序窗口最大化时，您可以使用等于边框宽度的负值来偏移应用程序容器，并向应用程序（而不是其容器）提供屏幕的宽度和高度。
As I can't test what I say as an AIR application at the moment, I illustrate it below with some code that you can test in jsfiddle . 由于我目前无法测试我作为AIR应用程序所说的内容，因此我将使用您可以在jsfiddle中测试的一些代码来说明它。 I used jquery to simplify the code. 我使用jquery来简化代码。 Is this what you mean? 你是这个意思吗？
HTML: HTML：
<div id="appContainer">
<div id="app">
<a id="maximize" href="#">Maximize</a>
</div>
</div>
CSS: CSS：
#appContainer {
background-color: black;
width: 106px;
height: 106px;
position: absolute;
}
#app {
background-color: blue;
width: 100px;
height: 100px;
margin: 3px;
}
Javascript: 使用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());
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.