如何使用 Javascript 在 Windows 8 Metro 中制作带有部分标签的标题菜单？答案

【问题标题】：How to make header menus with section labels in Windows 8 Metro using Javascript?如何使用 Javascript 在 Windows 8 Metro 中制作带有部分标签的标题菜单？
【发布时间】：2012-07-12 06:06:35
【问题描述】：

如何在 Windows 8 Metro Javascript 中制作带有标题菜单和部分标签的导航菜单，如下图所示？

【问题讨论】：

标签： javascript html microsoft-metro winjs

【解决方案1】：

首先是定义HTML：

 <!-- Define the header menu -->
    <div id="headerMenu" data-win-control="WinJS.UI.Menu">
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'section1MenuItem',label:'Section page'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'section2MenuItem',label:'Section page'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'section3MenuItem',label:'Section page'}"></button>

        <hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'separator',type:'separator'}" />
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'homeMenuItem',label:'Home'}">
        </button>
    </div>


 <!-- The content that will be loaded and displayed. -->
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back"></button>
        <div class="titlearea win-type-ellipsis">
            <button class="titlecontainer">
                <h1>
                    <span class="pagetitle">Header</span>
                    <span class="chevron win-type-x-large">&#xe099</span>
                </h1>
            </button>
            <h2 class="pagesubtitle">With neat flyin effect</h2>
        </div>
     </header>

然后是Javascript：

   // This function is called whenever a user navigates to this page. It
   // populates the page elements with the app's data.
   ready: function (element, options) {

        document.querySelector(".titlearea").addEventListener("click", this.showHeaderMenu, false);
        document.getElementById("section1").addEventListener("click", function () { self.goToSection(0); }, false);
        document.getElementById("section2").addEventListener("click", function () { self.goToSection(1); }, false);
        document.getElementById("section3").addEventListener("click", function () { self.goToSection(2); }, false);
        document.getElementById("homeMenuItem").addEventListener("click", function () { self.goHome(); }, false);

    },
    // Binds the menu to an anchor and shows it
    showHeaderMenu: function () {

        var title = document.querySelector("header .titlearea");
        var menu = document.getElementById("headerMenu").winControl;
        menu.anchor = title;
        menu.placement = "bottom";
        menu.alignment = "left";

        menu.show();

    },
    // Navigate to a section
    goToSection: function (section) {
        switch (section) {
            case 1:
                WinJS.Navigation.navigate("/pages/section1/section1.html");
                break;
            case 2:
                WinJS.Navigation.navigate("/pages/section2/section2.html");
                break;
            case 3:
                WinJS.Navigation.navigate("/pages/section3/section3.html");
                break;

        }
        WinJS.log && WinJS.log("You are viewing the #" + section + " section.", "sample", "status");

    },
    // Go to the home screen
    goHome: function () {

        WinJS.Navigation.navigate("/default.html");

    },

只是想分享，希望对大家有帮助！

【讨论】：