我正在玩一些 Windows 8 的东西,想知道如何在 Windows 8 应用程序中执行以下操作。
- 显示网页。
- 在网页上实现 Metro 风格的应用栏。
这是我的default.html:
<body role="application">
<div style="z-index:2;">
<div id="standardAppBar" data-win-control="WinJS.UI.AppBar" disabled="false" aria-label="Command Bar"
data-win-options="{position:'bottom',transient:true,autoHide:0,lightDismiss:true}" >
<div class="win-right">
<button onclick="sdkSample.displayStatus('Add button pressed')" class="win-command">
<span class="win-commandicon win-large iconAdd"></span>
<span class="win-label">Add to Menu_1</span>
</button>
</div>
</div>
</div>
<div style="z-index:0;">
<div data-win-control="WinJS.UI.ViewBox">
<div>
<!-- taking Apple.com as an example -->
<iframe class="fullscreen" src="http://apple.com" />
</div>
</div>
</div>
</body>
这是我的“全屏”CSS
.fullscreen {
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:80%; /* leave 20% white space to right click to toggle App Bar */
}
通常,可以通过右键单击来切换应用栏。但是在上面的代码中,右键单击在 iFrame 上不起作用。所以我不得不留出 20% 的空白让我点击切换空白。但我真的想让它成为全屏。任何人?非常感谢你。
注意:如果您使用的是触摸设备,实际上可以通过将手指从屏幕外侧滑动到屏幕内侧来切换应用栏。所以这很好用。但不适用于右键单击。所以这篇文章要求右键单击选项。非常感谢您提前。