Win8：WinJS.UI.AppBar 工具栏

创建工具栏不是十分简单，直接用winjs的控件appbar就行。直接看官方代码：

在HTML中：

    <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}">
        </button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'global',tooltip:'Remove item'}">
        </button>
        <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'global'}" />
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'global',tooltip:'Delete item'}">
        </button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}">
        </button>
    </div>

要添加相应时间，直接在js的WinJS.UI.processAll 加载之后添加即可：

document.getElementById("cmdAdd").addEventListener("click", doClickAdd, false);


    function doClickAdd() {
        WinJS.log && WinJS.log("Add button pressed", "sample", "status");
    }

如果你在default.html 中添加了上面AppBar 那工具栏就会在所有pages中有效，当然你也可以在特定页中使用不同的AppBar。

看下效果图：

看看 WinJS.UI.AppBar 的data-win-options 属性：

disabled: default is false. true 的话就创建一个不可用的appbar。

layout：can be "commands" (the default) or "custom"

placement can be either "top" or "bottom" (the default).

sticky: default is false. true 的话貌似只有右击能取消掉bar。

再看WinJS.UI.AppBarCommand 的属性及options：

id：标识, which you can use with document.getElementById or the app bar’s getCommandById method to wire up click handlers.

type：One of "button" (the default), "separator" (which creates a vertical bar分界线), "flyout" (which triggers a popup specified with the flyout property; “Command Menus”), and "toggle" (which creates a button with on/off states)。

label: command 的字，如上面的add。

tooltip： 当鼠标移在command上时的提示信息。

icon：图标；

section: 位置。selection 在左边，global在右边（LTR）。