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';
        });
    }

這樣就大功告成了。