与选择选项

WinJS应用栏我有了自定义控件的应用栏，如下图所示：与选择选项

<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.我们的要求已经改变，我们现在需要展示一种从“第一项”和“第二项”下拉的项目。因此，当用户点击“First Item”下拉菜单时，它会在“Sub Sub1”和“SunItem 2”下面显示两个按钮，当用户点击“Second Item”时，会显示两个按钮“SubItem 3”和“SubItem 4”。

这个实现是有在Windows 8的天气应用程序。在顶部导航栏的“地方”有这个选项选择，如果你有一个以上的地方。

我的应用程序栏是天气应用程序上的导航完全相同酒吧。我们希望这个下拉选项也是如此。

，我只是不知道是什么，我在这种情况下，使用控制（如果我想下拉）。

任何帮助表示赞赏。

吉里贾·

来源

2013-02-14 Shankar

你在找什么是WinJS.UI.Flyout控制。您可以看到有关控制的更多信息以及如何实施一个here on MSDN。

来源

2013-02-14 22:51:58 GotDibbs

@GotDibbs建议WinJS.UI.Flyout，但我觉得更具体的你应该看看WinJS.UI.Menu。这两者密切相关，但Flyout需要您创建所有子菜单功能，而菜单则为您完成。

来源

2013-02-15 16:56:05

+1杰里米 - 这其实就是我一直在寻找:)。只是不记得当时被称为什么。 – GotDibbs 2013-02-15 17:05:40

我推荐一起使用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-21 05:54:10 mkjunior19

回答

相关问题