HTML and CSS Reference
In-Depth Information
Listing 3-1. Defining an AppBar in the appbar.html File
<div id="appBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{section: 'global', label: 'New Item', icon: 'add'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{section: 'global', label: 'Stores',
icon: 'shop'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{section: 'global', label: 'Zip Code', icon: 'home'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id: 'done', disabled: true,
section: 'selection', label: 'Done', icon: 'accept'}">
The AppBar is denoted by a div element that has the data-win-control set to WinJS.
AppBar . An AppBar contains one or more button elements whose data-win-control attribute
is set to WinJS.UI.AppBarCommand . Each button requires configuration information, and this is
provided through the data-win-options attribute, following the format of a simple JavaScript
object. I'll explain the meaning of the configuration properties shortly.
You can also specify AppBar buttons using a series of nested HTML elements, which
obviates the need for the JavaScript-like configuration object. I don't like having to embed frag-
ments of code into my markup, but it is something that pervades WinJS, so I tend to stick with
the approach shown in the listing. It is ugly, but it is consistent with the way other controls work.
Listing 3-2 shows how I import the HTML fragment defined in appbar.html into the
default.html document.
Listing 3-2. Importing an HTML Fragment into default.html
<!DOCTYPE html>
<meta charset="utf-8">
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<!-- MetroGrocer references -->
<link href="/css/list.css" rel="stylesheet">
<link href="/css/default.css" rel="stylesheet">
Search WWH ::

Custom Search