HTML and CSS Reference
In-Depth Information
Charms provide a common way for users to get to the features of nearly every application;
for example, search, share, and access to files. The App bar, instead, contains application-specific
commands and is expected to list commands that make sense for the current view only.
Creating a sample app bar
To get familiar with WinJS programming, here's a quick taste of what it means to create an
AppBar
in a Windows Store application. As first step, you need some HTML markup to host the
AppBar
. Most
WinJS visual components just take an HTML segment and transform it into something else. You can
create a new blank project and edit the
default.html
page to contain the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My AppBar</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>
<!-- MyAppBar references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<h1 id="header">
Sample page using an app-bar.
</h1>
<hr />
<div id="yourAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',label:'Add',icon:'add'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove'}">
</button>
<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'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera'}">
</button>
Search WWH ::
Custom Search