locked
splitButton on NavBar

 > 

    Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    I've created a navbar and now I would like to add some splitbutton for submenus with similar navigation capability. How/where do I add the splitbuttons? Here's where I am so far:

     

     <div id="navbar" data-win-control="WinJS.UI.NavBar" data-win-options="{placement: 'top'}">
        <div id="GlobalNav" data-win-control="WinJS.UI.NavBarContainer">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{id:'cmd', label:'Rad', location: '/pages/home/home.html', splitButton: 'true'}"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{id:'cmd', label:'Sat', location: '/pages/Satellite/sat.html'}"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{id:'cmd', label:'UA', location: '/pages/UADep/ua.html'}"></div>
        </div>
   </div>

    Where do my child menu buttons go?  Is it possible to have another navbar as a child menu?

    Sunday, May 18, 2014 12:36 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi hxnwx,

    I believe this blog could be a good start for you to learn how to cooperate with splitbuttons: http://blogs.msdn.com/b/eternalcoding/archive/2013/10/02/how-to-improve-ergonomy-of-your-javascript-html5-css3-windows-8-1-apps-with-the-new-navigation-bar-control.aspx

    To work with the sub-menus, you have to connect to the splittoggle event of the NavBarContainer.

    So to summarize you have to:

    • Declare a WinJS.UI.NavBar
    • Declare a WinJS.UI.NavBarContainer
    • Add some WinJS.UI.NavBarCommand to the container
    • Declare flyouts for sub-menus
    • Add code when button’s code is invoked
    • Handle the display of sub-menus using splittoggle event

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, May 19, 2014 6:58 AM
    Moderator