與選擇選項

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

回答

相關問題