Question

我有一个应用栏，其中包含自定义控件，如下所示：

<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>

“First Item”和“Second Item”是div，点击导航到1或2的页面。我们的要求已经改变，我们现在要求显示“First Item”和“Second Item”的下拉类型”。因此，当用户点击“First Item”中的下拉菜单时，它会在“SubItem 1”和“SunItem 2”下方显示两个按钮，当用户点击“Second Item”时，它会显示两个按钮“SubItem 3”和“SubItem 4”。

此实现在Windows 8天气应用程序中。在顶部导航栏“places”有这个选项，如果你有更多的地方选择。

我的应用栏与天气应用程序上方导航栏完全相同。我们也想要这个下拉选项。

我只是不确定在这种情况下我必须使用什么控件（如果我想要下拉）。

感谢任何帮助。

吉里贾

Answer 1

@GotDibbs推荐WinJS.UI.Flyout，但我更具体地说你应该看WinJS.UI.Menu。这两者密切相关，但Flyout将要求您构建所有子菜单功能，而菜单则为您完成。

Answer 2

您正在寻找的是WinJS.UI.Flyout控件。您可以查看有关控件的更多信息以及如何实现一个here on MSDN。

Answer 3

我建议一起使用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>

带有选择选项的WinJS App栏

3 个答案: