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)。

   
本文转自老Zhan博客园博客,原文链接:http://www.cnblogs.com/mybkn/archive/2012/10/29/2745534.html ,如需转载请自行联系原作者
相关文章
|
5月前
【Qt 学习笔记】Qt常用控件 | 输入类控件 | Text Edit的使用及说明
【Qt 学习笔记】Qt常用控件 | 输入类控件 | Text Edit的使用及说明
559 0
|
机器人 Windows
RPA.UI.Win32.InputText方法
RPA.UI.Win32.InputText方法
81 1
|
8月前
|
资源调度 JavaScript 开发者
如何强制安装element-ui
如何强制安装element-ui
147 0
|
XML 存储 Java
UI Automator Viewer的使用
UI Automator Viewer的使用
315 0
QT --- Qt的lineEdit添加鼠标点击事件
QT --- Qt的lineEdit添加鼠标点击事件
1053 0
element-ui输入框中添加按钮
element-ui输入框中添加按钮
806 3
element-ui输入框中添加按钮
|
JavaScript 前端开发
Using JavaFX UI Controls 18 超链接
原网页地址:http://docs.oracle.com/javafx/2/ui_controls/hyperlink.htm#CIHGADBG
175 0
Using JavaFX UI Controls 18 超链接
|
C# Windows
WPF 4 开发Windows 7 任务栏(Overlay Icon、Thumbnail Toolbar、Progress Bar)
原文:WPF 4 开发Windows 7 任务栏(Overlay Icon、Thumbnail Toolbar、Progress Bar)      在上一篇我们介绍了如何在WPF 4 中开发Windows 7 跳转列表,本篇将继续针对WPF 4 中任务栏其他功能:覆盖图标(Overlay Icon)、进度条(Progress Bar)、缩略图工具栏(Thumbnail Toolbar)进行研究。
1245 0