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>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{section: 'global', label: 'Stores',
icon: 'shop'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{section: 'global', label: 'Zip Code', icon: 'home'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id: 'done', disabled: true,
section: 'selection', label: 'Done', icon: 'accept'}">
</button>
</div>
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.
Tip
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>
<html>
<head>
<meta charset="utf-8">
<title>MetroGrocer</title>
<!-- 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