windows8 develop metro sample code-3 application bar

1.write normal html code:

<!-- App bar -->
    <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{
        commands:[
            {id:'cmdMap', label:'Map', icon:'home', section: 'global'},
            {id:'cmdDetail', label:'Detail', icon:'page', section: 'global'},
            {id:'cmdAdd', label:'New url', icon:'add', section:'global', tooltip:'Submit a new url'},
            {id:'cmdShare', label:'Share', icon:'reshare', section: 'selection'},
            {id:'cmdAlexa', label:'Alexa', icon:'link', section: 'selection'}
        ]}"></div>

2.js event code:

var button;

                button = document.getElementById("cmdMap").winControl;
                button.addEventListener("click", GameManager.navigateMap, false);
                WinJS.Utilities.addClass(button, "snapped-hidden");

                button = document.getElementById("cmdAdd").winControl;
                button.addEventListener("click", GameManager.navigateAdd, false);
                WinJS.Utilities.addClass(button, "snapped-hidden");

                button = document.getElementById("cmdDetail");
                button.winControl.addEventListener("click", GameManager.navigateDetail, false);
                WinJS.Utilities.addClass(button, "snapped-hidden");

                button = document.getElementById("cmdShare");
                button.winControl.addEventListener("click", GameManager.showShareUI, false);
                WinJS.Utilities.addClass(button, "snapped-hidden hide-ctl");

                button = document.getElementById("cmdAlexa");
                button.winControl.addEventListener("click", GameManager.navigateAlexa, false);
                WinJS.Utilities.addClass(button, "snapped-hidden hide-ctl");

3.when in mabpage.html will actived cmdShare and cmdAlexa:

function onSelectionChanged(event) {
        // ListView.selection,in pc is right mouse key.
        var list = listLabelView.winControl;
        if (!list || !list.selection || !list.selection.count()) {
            GameManager.curSelectionUrl = null;
            WinJS.Utilities.addClass(document.getElementById("cmdShare"), "hide-ctl");
            WinJS.Utilities.addClass(document.getElementById("cmdAlexa"), "hide-ctl");
            return;
        }

        WinJS.Utilities.removeClass(document.getElementById("cmdShare"), "hide-ctl");
        WinJS.Utilities.removeClass(document.getElementById("cmdAlexa"), "hide-ctl");
        var url = null;
        var obj = list.selection.getItems().done(function (items) {
            GameManager.curSelectionUrl = items[0].data.url;
            GameManager.state.internal.currentQueryDoamin = GameManager.pklib.utils.getHost(GameManager.curSelectionUrl);
        });
    }

4.look

normal:

all actived: