1

以下に示すように、カスタム コントロールを持つアプリ バーがあります。

<div class="appBarMain" data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar" 
    data-win-options="{layout:'custom',placement:'top'}">
    <header class="upperNavBar">
        <div class="divHome item">
            <img class="image" src="/images/storelogo.png"/>
            <div class="overlay">
                <h4 class="title">Go Home</h4>
            </div>
        </div>
         <div class="div1 item">
            <img class="image" src="/images/storelogo.png"/>
            <div class="overlay">
                <h4 class="title">First Item</h4>
            </div>
        </div> 
        <div class="div2 item">
            <img class="image" src="/images/storelogo.png"/>
            <div class="overlay">
                <h4 class="title">Second Item</h4>
            </div>
        </div> 
    </header>
</div>

「最初のアイテム」と「2 番目のアイテム」は div であり、クリックすると 1 または 2 のページに移動します。要件が変更され、「最初のアイテム」と「2 番目のアイテム」から一種のドロップダウンを表示する必要があります。したがって、ユーザーが「最初のアイテム」のドロップダウンをクリックすると、「サブアイテム 1」と「SunItem 2」の下に 2 つのボタンが表示され、ユーザーが「2 番目のアイテム」をクリックすると、「サブアイテム 3」と「サブアイテム 4」の 2 つのボタンが表示されます。

この実装は、Windows 8 の天気アプリにあります。上部のナビゲーション バーの「場所」には、複数の場所がある場合にこのオプションを選択できます。

私のアプリ バーは、Weather アプリの上部ナビゲーション バーとまったく同じです。このドロップダウンオプションも必要です。

この場合に使用しなければならないコントロールが何であるかわかりません（ドロップダウンが必要な場合）。

どんな助けでも大歓迎です。

  • ギリヤ
4

3 に答える 3

2

@GotDibbs は を推奨しましたWinJS.UI.Flyoutが、より具体的にはWinJS.UI.Menu. この 2 つは密接に関連していますが、Flyout ではすべてのサブメニュー機能を構築する必要がありますが、Menu ではそれが行われます。

于 2013-02-15T16:56:05.467 に答える
0

WinJS NavBar と Flyout を一緒に使用して、Windows 8 の天気アプリのトップ ナビゲーション バーを実現することをお勧めします。MSDN NavBar サンプル シナリオ #6 は、このシナリオを有効にする方法を示しています: http://code.msdn.microsoft.com/windowsapps/HTML-NavBar-control-sample-4472d92a/view/SourceCode#content

サンプルのコードは次のとおりです。

<div id="useSplit" data-win-control="WinJS.UI.NavBar">
        <div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: 'favorite', splitButton: 'true' }"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Your account', icon: 'people' }"></div>
        </div>
    </div>
    <div id="contactFlyout" data-win-control="WinJS.UI.Flyout" data-win-options="{ placement: 'bottom' }">
        <div id="contactNavBarContainer" data-win-control="WinJS.UI.NavBarContainer"}">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Family' }"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Work' }"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Friends' }"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Blocked' }"></div>  
        </div>
    </div>
于 2014-08-21T05:54:10.517 に答える
0

あなたが探しているのはWinJS.UI.Flyoutコントロールです。コントロールとその実装方法の詳細については、MSDNを参照してください。

于 2013-02-14T22:51:58.390 に答える