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>
<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>
<h1 id="header">
Sample page using an app-bar.
<hr />
<div id="yourAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand"
<button data-win-control="WinJS.UI.AppBarCommand"
<hr data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{type:'separator',section:'global'}" />
<button data-win-control="WinJS.UI.AppBarCommand"
<button data-win-control="WinJS.UI.AppBarCommand"
Search WWH ::

Custom Search