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>

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

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

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

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

任何帮助表示赞赏。

  • 吉里哈
4

3 回答 3

2

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

于 2013-02-15T16:56:05.467 回答
0

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

于 2013-02-14T22:51:58.390 回答
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 回答