AppBar与Panel

一、AppBar

 

 

AppBar在win8应用中就是在屏幕下方弹出的一个Bar，在Bar可添加你需要的AppBarCommand来实现对应的功能，WinJS为我们提供了WinJS.UI.AppBar这样一种东西，使用起来也相当简单：

首先在要拥有AppBar的html文件中加入如下代码：

<div id="appBar" data-win-control:"WinJS.UI.AppBar"></div>

这样添加的是一个空的没有任何东西的AppBar，可以往里面加入AppBarCommand：

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

这样就相应的为AppBar添加了四个AppBarCommand，在data-win-options中设置command的一些基本属性，其他的都容易理解，就主要的还是section这个属性，global的command通常是在AppBar的右边，而seletion则是在AppBar的左边，具体的大家可以去查阅官方的API文档AppBarCommand.section。

现在只完成了一部分内容，接着还需要在该html对应的js文件里加入一点东西，这一步才是最重要的，要使用AppBar的html必须定义为page，不然的话，程序为出错跳出。

var page=WinJS.UI.Pages.define(对应html的URL，members);

在members里面就可以根据各个command对应的id为其添加各自的相应时间

在模拟机上用鼠标单击右键可显示AppBar，在真机上用手机划到屏幕底部就会自动弹出AppBar

二、Panel

看到一些应用，在点击某个地方后，会在屏幕的两边弹出以个页面，很好奇这个到底是怎么做到的，一开始还以为是charm，其实不然，它就是html中一个简单的div，用css调整位置后，加入动画就能实现了

首先还是在html文件中加入：

<div id="panel"></div>

这里插一句，本人发现Blend这个东西真的很好用，一般的一些控件设置调整什么的都完成可以靠它来实现，在Blend里你可以设置你的panel的起始位置和其他的一些设置，为了效果凸显，这是非常重要的步骤

再添加两个button，当单击是可以显示和隐藏Panel，然后将当前html定义为page，同样在members里面添加两个按钮的响应事件，即Panel出现和消失的动画，这里还需添加

panel=element.querySelector('#panel');

定义完page之后，定义两个全局变量

var animating=WinJS.Promise.Wrap();
var panel;

接着实现动画函数，这个过程需要设置Panel的style.opacity属性，即透明度，显示Panel的函数如下：

function PanelShowAnimation() {
        animating = animating.then(function () {
            panel.style.opacity = '1';
            return WinJS.UI.Animation.showPanel(panel);
        });
    }

隐藏Panel也是同样道理：

function PanelHideAnimation() {
        animating = animating.then(function () {
            return WinJS.UI.Animation.hidePanel(panel);
        }).then(function () {
            panel.style.opacity = '0';
        });
    }

这样就大功告成了。