HTML + JavaScript 学习Metro程序 （2）- 应用栏

应用栏是metro应用里面很重要的一部分，基本上每个metro应用都会用到。先看一下下面的图片：



在这个例子里面我们在顶部和底部各放了一个应用栏。

先看一下顶部应用栏的html代码：

<!-- custom appbar, it was set by layout:'custom'. with custom appbar, we can add anything inside -->
<div data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar"
data-win-options="{layout:'custom',placement:'top'}">
<button id="cmdBack" class="win-backbutton" aria-label="Back"></button>
<img alt="" src="images/smalllogo.png"/>
</div>

再看一下底部应用栏的html代码：

<!-- command appbar, only supports AppBarCommand, by default AppBar uses "Command" layout -->
<div data-win-control="WinJS.UI.AppBar" data-win-options="">
<!-- section:'global' means right side of appbar -->
<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>

<!-- vertical separator -->
<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>

<!-- section:'selection' means left side of appbar -->
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',
section:'selection',tooltip:'Take a picture'}">
</button>

</div>

OK, 现在来解释一下这些代码。

首先，WinJS.UI.AppBar是一个JavaScript控件。WinJS.UI.AppBar可以分为Custom和Command两种类型。Custom意味着我们可以自定义应用栏里面的控件，我们可以随意加入一些JavaScript控件和普通HTML控件。通过属性layout来设置：

属性layout：

1. 'custom'表示自定义应用栏；

2. 'commands'表示command应用栏。（默认是commands的）

另外AppBar可以支持2个地方，一个是顶部，一个是底部。

属性placement：

1. 'top'表示顶部；

2. 'bottom'表示底部（默认底部）。

看例子里面的顶部应用栏的定义：

<div data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar"

        data-win-options="{layout:'custom',placement:'top'}"></div>

我通过属性layout和placement定义了一个位于顶部的自定义应用栏。我在应用栏里面放了2个控件：一个JavaScript控件和一个HTML控件（一个图片）。因为是自定义应用栏，我们可以在里面放置任何东西。比如给img控件加上个属性来设置left margin什么的。我们可以把例子里面的自定义应用栏设置为bottom，而command应用栏设置为top，那么显示位置就反过来了，command应用栏跑到上面去了。

 

看另一个应用栏，是这么定义的：

<div data-win-control="WinJS.UI.AppBar" data-win-options="">

使用了默认属性，那么就是底部commands类型的应用栏。根据MSDN上的说法，Commands应用栏只支持AppBarCommand控件。我们可以看到上面的例子代码里面定义了一些WinJS.UI.AppBarCommand控件，包括一个竖线分隔符。

command应用栏有2个概念：selection和global。从位置上讲，selection指应用栏左边区域，global指应用栏的右边区别。从另外一重意思来说，selection command是指跟某个object有关的，比如用户选择了某个object之后，selection command按钮才变亮，不然是灰色不可用的。而global command是指不针对某个object，或者说没有context，而是任何时候都保持一样的。

AppBarCommand可以通过属性section来设置是放在selection区域还是global区域。比如add按钮放在global区域（右边）：

<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',label:'Add',icon:'add',
section:'global',tooltip:'Add item'}">
</button>

而照相按钮放在selection区别（左边）

<!-- section:'selection' means left side of appbar -->
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',
section:'selection',tooltip:'Take a picture'}">
</button>

 

ok，html部分就这么多。其实我觉得command应用栏就是一种特殊的应用栏，是微软预先为我们定义了一种常用的应用栏。我们完全可以用自定义应用栏来实现command应用栏，当然既然有现成的了，没有必要多花时间自己去定义。

总体来讲，使用应用栏会用到2种JavaScript控件：AppBar和AppBarCommand。

应用栏还有其他一些属性，具体参考：http://msdn.microsoft.com/en-us/library/windows/apps/br229670.aspx

 

看一下相应的js代码，这里是指给按钮加了点击函数。相当的简单：

(function () {
"use strict";
var page = WinJS.UI.Pages.define("pagecontrol.html", {
ready: function (element, options) {
document.getElementById("cmdAdd")
.addEventListener("click", doClickAdd, false);
document.getElementById("cmdRemove")
.addEventListener("click", doClickRemove, false);
document.getElementById("cmdDelete")
.addEventListener("click", doClickDelete, false);
document.getElementById("cmdCamera")
.addEventListener("click", doClickCamera, false);
document.getElementById("cmdBack").addEventListener("click", doClickBack, false);

WinJS.log && WinJS.log("To show the bar, swipe up from " +
"the bottom of the screen, right-click, or " +
"press Windows Logo + z. To dismiss the bar, " +
"tap in the application, swipe, right-click, " +
"or press Windows Logo + z again.", "sample", "status");
},
});

// Command button functions
function doClickAdd() {
WinJS.log && WinJS.log("Add button pressed");
}

function doClickRemove() {
WinJS.log && WinJS.log("Remove button pressed");
}

function doClickDelete() {
WinJS.log && WinJS.log("Delete button pressed");
}

function doClickCamera() {
WinJS.log && WinJS.log("Camera button pressed");
}

function doClickBack() {
WinJS.log && WinJS.log("back button pressed");
}

WinJS.log = function (message) {
var statusDiv = document.getElementById("statusMessage");
if (statusDiv) {
statusDiv.innerText = message;
}
};
})();

定义了一些响应函数，然后在ready函数里面设置一下，那么当我们点击应用栏里面的按钮的时候，就会调用相应的函数了。

 

 

完整html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pagecontrol</title>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<link href="/css/pagecontrol.css" rel="stylesheet" />
<script src="/js/pagecontrol.js"></script>
<script src="/js/appbar.js"></script>

</head>
<body>
<!-- custom appbar, it was set by layout:'custom'. with custom appbar, we can add anything inside -->
<div data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar"
data-win-options="{layout:'custom',placement:'top'}">
<button id="cmdBack" class="win-backbutton" aria-label="Back"></button>
<img alt="" src="images/smalllogo.png"/>
</div>

<!-- command appbar, only supports AppBarCommand, by default AppBar uses "Command" layout -->
<div data-win-control="WinJS.UI.AppBar" data-win-options="">
<!-- section:'global' means right side of appbar -->
<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>

<!-- vertical separator -->
<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>

<!-- section:'selection' means left side of appbar -->
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',
section:'selection',tooltip:'Take a picture'}">
</button>

</div>

<div class="pagecontrol fragment" style="text-align:center">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Second page</span>
</h1>
</header>

<a href="/default.html">return to "login page"</a>
</div>

<div id="statusMessage" style="margin-top:100px"></div>

</body>
</html>