创建工具栏不是十分简单,直接用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)。