2

我正在玩一些 Windows 8 的东西，想知道如何在 Windows 8 应用程序中执行以下操作。

  1. 显示网页。
  2. 在网页上实现 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% 的空白让我点击切换空白。但我真的想让它成为全屏。任何人？非常感谢你。

注意：如果您使用的是触摸设备，实际上可以通过将手指从屏幕外侧滑动到屏幕内侧来切换应用栏。所以这很好用。但不适用于右键单击。所以这篇文章要求右键单击选项。非常感谢您提前。

4

2 回答 2

1

由微软研究员回答..在这里重新发布...

这个想法是在 iframe 上添加一个 div。需要确保 div 具有透明背景并且 div 位于 iframe 的“上方”。

http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/45f947c5-ee79-4eed-8bb3-6352e89c8c05

于 2012-01-17T01:53:27.723 回答
0

右键单击页面底部留下的 20% 空间。我敢打赌，App Bar 会出现。当您在底部滑动手指时，您正在触摸父页面，因此会显示 App Bar，但是当您在 iframe 中右键单击时，不会将右键单击检测为父页面上的事件，因此 App Bar 会不出现。

在这些情况下，您将不得不使用片段导航而不是您使用的 iframe 导航。

编辑：
假设以下html在 default.html 的 body 标记中。
“contentHost” div 将是您加载页面的位置（甚至是初始页面）
App Bar 也将存在于此页面上。

<div id="contentHost">

</div>
<div id="trafficTipsAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{position:'bottom',transient:true,autoHide:0,lightDismiss:true}">
    <div class="win-right">
        <button class="win-command" id="settingsButton">
            <span style="background-image: url('images/smalllogo.png')" class="win-commandicon"></span>
            <span class="win-label">Settings</span>
        </button>
    </div>
</div>

default.js 将如下所示。
您可以按原样使用“导航”功能。
还包括这一行WinJS.Navigation.addEventListener('navigated', navigated);
您会注意到在WinJS.Application.onmainwindowactivated上，我们正在导航到“main.html”片段，这是初始加载。您可以使用“添加新项目”>“片段”来创建它。
此外，当我们单击应用栏中的“设置”按钮时，我们将导航到“settings.html”片段

(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);

document.addEventListener("DOMContentLoaded", function () {
    WinJS.UI.processAll();
}, false);

WinJS.Application.onmainwindowactivated = function (e) {
    if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        WinJS.Navigation.navigate('main.html');

        var settingsButton = document.getElementById('settingsButton');
        settingsButton.addEventListener('click', function () {
            WinJS.Navigation.navigate('settings.html');
        });
    }
}

function navigated(e) {
    WinJS.UI.Fragments.clone(e.detail.location, e.detail.state)
        .then(function (frag) {
        var host = document.getElementById('contentHost');
        host.innerHTML = '';
        host.appendChild(frag);
        document.body.focus();

        WinJS.Application.queueEvent({
            type: 'fragmentappended',
            location: e.detail.location,
            fragment: host,
            state : e.detail.state
            });

    });
}

WinJS.Navigation.addEventListener('navigated', navigated);
WinJS.Application.start();
})();
于 2012-01-10T20:40:31.097 回答