带有选择选项的 WinJS 应用栏答案

【问题标题】：WinJS App bar with select option带有选择选项的 WinJS 应用栏
【发布时间】：2013-02-14 22:38:29
【问题描述】：

我有一个具有自定义控件的应用栏，如下所示：

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

“第一项”和“第二项”是 div，点击导航到 1 或 2 的页面。我们的要求已更改，现在需要显示“第一项”和“第二项”的下拉菜单”。因此，当用户单击“第一项”中的下拉菜单时，它会在“子项 1”和“SunItem 2”下方显示两个按钮，当用户单击“第二项”时，它会显示两个按钮“子项 3”和“子项 4”。

Windows 8 天气应用程序中有此实现。如果您有多个地点，则顶部导航栏“地点”有此选项。

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

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

感谢任何帮助。

吉里哈

【问题讨论】：

标签： winjs

【解决方案1】：

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

【讨论】：

+1 Jeremy - 这就是我一直在寻找的 :)。只是不记得当时叫什么。

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：