Quickstart: adding an app bar with custom content (Windows Store apps using JavaScript and HTML) (Windows)

1 out of 7 rated this helpful - Rate this topic

This quickstart explains how to add an app bar with custom content to your Windows Store app using JavaScript.

Use this technique primarily for making navigation bars at the top of the screen.

Prerequisites

Instructions

1. Initialize the app bar

The following code initializes all of the Windows Library for JavaScript objects, including the app bar, when the app is loaded. It is called only once for the app.

JavaScript


<script>
    // App bar initialization.
    document.addEventListener("DOMContentLoaded", function () {
        WinJS.UI.processAll();
    }, false);
</script>

2. Add the bar control and customize its commands

This example adds a bar on the top edge of the application. The bar has a single button:

HTML


<body>
    <div data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar" 
        data-win-options="{layout:'custom',placement:'top'}">
        <header aria-label="Navigation bar" role="banner">
            <button id="cmdBack" class="win-backbutton" aria-label="Back"></button>
        </header>
    </div>
</body>

Note You can put any custom HTML in the app bar when specifying layout:'custom'. For a list of icons available for use, see AppBarIcon enumeration.

Summary

In this quickstart you added a custom app bar to your app.

Quickstart: adding an app bar with custom content (Windows Store apps using JavaScript and HTML)

Prerequisites

Instructions

1. Initialize the app bar

2. Add the bar control and customize its commands

Summary

Related topics