Represents an application toolbar for displaying commands.
Syntax
<div data-win-control="WinJS.UI.AppBar"></div>
var object = new WinJS.UI.AppBar(element, options);
Members
The AppBar object has these types of members:
Events
The AppBar object has these events.
| Event | Description |
|---|---|
| onafterhide |
Occurs immediately after the AppBar is hidden. |
| onaftershow |
Occurs after the AppBar is shown. |
| onbeforehide |
Occurs before the AppBar is hidden |
| onbeforeshow |
Occurs before a hidden AppBar is shown. |
Methods
The AppBar object has these methods.
| Method | Description |
|---|---|
| addEventListener |
Registers an event handler for the specified event. |
| AppBar |
Creates a new AppBar object. |
| getCommandById |
Returns the AppBarCommand object identified by id. |
| hide Method |
Hides the AppBar. |
| hideCommands |
Hides the specified commands of the AppBar. |
| removeEventListener |
Removes an event handler that the addEventListener method registered. |
| show Method |
Shows the AppBar if it is not disabled. |
| showCommands |
Shows the specified commands of the AppBar. |
| showOnlyCommands |
Shows the specified commands of the AppBar while hiding all other commands. |
Properties
The AppBar object has these properties.
| Property | Description |
|---|---|
|
Sets the AppBarCommand objects that appear in the app bar. | |
|
Gets or sets a value that indicates whether the AppBar is disabled. | |
|
Gets the DOM element that hosts the AppBar. | |
|
Gets a value that indicates whether the AppBar is hidden or in the process of becoming hidden. | |
|
Gets or sets the layout of the app bar contents. | |
|
Gets or sets a value that specifies whether the AppBar appears at the top or bottom of the main view. | |
|
Gets or sets a value that indicates whether the AppBar is sticky (won't light dismiss). If not sticky, the app bar dismisses normally when the user touches outside of the appbar. |
Remarks
Styling the AppBar
CSS classes
To customize the AppBar, you can define your own styles for these CSS classes (defined by the Windows Library for JavaScript style sheets):
| CSS class | Description |
|---|---|
|
win-appbar |
Styles an AppBar that uses a custom layout. |
|
win-command |
Styles commands within the AppBar. |
|
win-commandicon |
Styles the icon box for AppBar commands. |
|
win-commandimage |
Styles the images for AppBar commands. |
|
win-commandlayout |
Styles an AppBar that uses the standard layout. |
|
win-commandring |
Styles the icon rings for AppBar commands. |
|
win-label |
Styles labels for AppBar commands. |
Note There are several CSS classes that are shared between multiple Windows Library for JavaScript controls. To limit your custom styles to a specific control, assign the control an ID or custom class name and use that as part of your style selector.
Examples
The following example shows how to create an app bar and Add, Remove, Delete, and Camera commands. You should be sure you add the app bar as a direct child of the <body> element. For the full example, see HTML AppBar control sample.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" href="/css/create-appbar.css" /> <script src="/js/create-appbar.js"></script> <script src="/js/appbarsampleutils.js"></script> </head> <body> <div data-win-control="SdkSample.ScenarioInput"> <p> The AppBar is hidden by default and appears when users swipe a finger from the bottom edge of the screen. It covers the content of the application and can be dismissed by the user with an edge swipe or by interacting with the application.</p> <br /> <br /> </div> <div data-win-control="SdkSample.ScenarioOutput"> </div> <!-- Create AppBar --> <!-- BEGINTEMPLATE: Template code for an AppBar --> <div id="createAppBar" 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',section:'global',tooltip:'Add item'}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'global',tooltip:'Remove item'}"> </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',section:'global',tooltip:'Delete item'}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}"> </button> </div> <!-- ENDTEMPLATE --> </body> </html>
(function () { "use strict"; var page = WinJS.UI.Pages.define("/html/create-appbar.html", { ready: function (element, options) { document.getElementById("cmdAdd").addEventListener( "click", doClickAdd, false); document.getElementById("cmdRemove").addEventListener( "click", doClickRemove, false); document.getElementById("cmdDelete").addEventListener( "click", doClickDelete, false); document.getElementById("cmdCamera").addEventListener( "click", doClickCamera, false); WinJS.log && WinJS.log( "To show the bar, swipe up from the bottom of the screen, right-click, or press Windows Logo + z. To dismiss the bar, tap in the application, swipe, right-click, or press Windows Logo + z again.", "sample", "status"); }, unload: function () { AppBarSampleUtils.removeAppBars(); } }); // Command button functions function doClickAdd() { WinJS.log && WinJS.log("Add button pressed", "sample", "status"); } function doClickRemove() { WinJS.log && WinJS.log("Remove button pressed", "sample", "status"); } function doClickDelete() { WinJS.log && WinJS.log("Delete button pressed", "sample", "status"); } function doClickCamera() { WinJS.log && WinJS.log("Camera button pressed", "sample", "status"); } })();
Requirements
|
Minimum supported client | Windows 8 [Windows Store apps only] |
|---|---|
|
Minimum supported server | Windows Server 2012 [Windows Store apps only] |
|
Namespace |
WinJS.UI |
|
Library |
|
See also
- HTML AppBar control sample
- Quickstart: adding an app bar with commands
- Quickstart: adding an app bar with custom content
Build date: 12/5/2012
