2

私はいくつかのWindows 8のものをいじっていますが、Windows 8アプリで次のことができるのだろうかと思っています.

  1. Web ページを表示します。
  2. Web ページに 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 が表示されることです。一番下を指でスワイプしていた時は親ページをタッチしていたのでアプリバーが表示されるのですが、iframe内で右クリックすると親ページでは右クリックがイベントとして検出されないのでアプリバーが表示されます現れません。

これらのシナリオでは、使用していた iframe ナビゲーションではなく、フラグメント ナビゲーションを使用する必要があります。

編集:
次のhtmlが default.html の body タグにあるとします。
「contentHost」 div は、ページをロードする場所になります (最初のページでも)
。アプリ バーもこのページに存在します。

<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」フラグメントに移動している ことに気付くでしょう。これが初期ロードです。これは、[新しいアイテムの追加] > [フラグメント] を使用して作成できます。 また、App Bar の「設定」ボタンをクリックすると、「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 に答える