应用栏是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>