EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

WinJS.UI.AppBar object

Applies to Windows and Windows Phone

The application toolbar used to display commands (AppBarCommand) that are relevant to the user's context, typically the current page or the current selection.

Explore this functionality in more depth as part of our App features, start to finish series:  Flat navigation, start to finish (HTML) and Hierarchical navigation, start to finish (HTML)

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:

Constructors

The AppBar object has these constructors.

ConstructorDescription
AppBar

Creates a new AppBar object.

 

Methods

The AppBar object has these methods.

MethodDescription
addEventListener

Registers an event handler for the specified event.

dispatchEvent

Raises an event of the specified type and with additional properties.

dispose

Releases resources held by this AppBar. Call this method when the AppBar is no longer needed. After calling this method, the AppBar becomes unusable.

getCommandById

Returns the AppBarCommand object identified by id.

hide Method

Hides the app bar on Windows and the secondary command menu on Windows Phone.

hideCommands

Hides the specified commands of the AppBar.

removeEventListener

Removes an event handler that the addEventListener method registered.

show Method

If the app bar is not disabled, shows the app bar on Windows and shows the secondary command menu on Windows Phone

showCommands

Shows the specified commands in the AppBar.

showOnlyCommands

Shows the specified commands in the AppBar while hiding all other commands.

 

Properties

The AppBar object has these properties.

PropertyAccess typeDescription

closedDisplayMode

Read/write

Gets or sets how the app bar is displayed when hidden is true.

commands

Write-only

Sets the AppBarCommand objects that appear in the app bar.

disabled

Read/write

Gets or sets a value that indicates whether the AppBar is disabled.

element Property

Read-only

Gets the DOM element that hosts the AppBar.

hidden

Read-only

Gets a value that indicates whether the AppBar is hidden or in the process of becoming hidden.

layout

Read/write

Gets or sets the layout of the app bar contents.

placement

Read/write

Gets or sets a value that specifies where the AppBar appears on the display.

sticky

Read/write

Gets or sets a value that indicates whether the app bar can be light dismissed (hidden when the user touches outside of the app bar).

 

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 classDescription

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.

win-reduced

Styles commands to shrink (or drop labels) based on the window size and the number of visible AppBar buttons.

 

Note  There are several CSS classes that are shared between multiple WinJS 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.

For a list of icons that you can use in an AppBar, see AppBarIcon.

An AppBar control with a layout property set to "custom" can contain any HTML. However, an app bar with a "custom" layout doesn’t have the full functionality available to an app bar using the "commands" layout.

An AppBar control with a layout property set to "commands" can contain only AppBarCommand controls.

The "commands" value is the default setting for the layout property. This layout includes two sections: "global" and "selection".

  • Applies to Windows

Note  

"global" maps to right and "selection" maps to left in LTR (left-to-right) layouts. The opposite is true in RTL (right-to-left) layouts.

"global" is intended for commands that should be displayed at all times.

"selection" is intended for context commands for selected objects.

  • Applies to Windows Phone

Note  

"global" is for primary commands that are always visible in the app bar. Only the first four commands declared as "global" are displayed.

"selection" is for non-primary (or secondary) commands. These are text-based menu items that appear when a primary command is invoked. All commands declared as "selection" are displayed (based on display resolution).

Examples

Here we show how to declare a standard "commands" app bar that contains each of the supported AppBarCommand types.

  • Applies to Windows Phone

Note  

The AppBarCommand can be one of these types:

  • "button"
  • "toggle"

<!-- Define the app bar -->
<div id="appBar" 
     data-win-control="WinJS.UI.AppBar" 
     data-win-options="{placement:'bottom', layout:'commands'}">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'secondary1',
            type:'button',
            label:'Secondary1',
            section:'selection'}"></button>
    <div data-win-control="WinJS.UI.AppBarCommand"
         data-win-options="{ id: 'list',
         type: 'content',
         label:'List',
         section: 'selection'}">
        <select class="options">
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
            <option>Option4</option>
        </select>
    </div>
    <div data-win-control="WinJS.UI.AppBarCommand"
         data-win-options="{ id: 'textfield',
         type: 'content',
         label:'Text field',
         section: 'selection' }">
        <input type="text" value="Text" />
    </div>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'flyoutButton',
            type:'flyout',
            label:'Flyout',
            icon:'openpane',
            section: 'selection',
            flyout:select('#exampleFlyout')}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdToggle',
            type:'toggle',
            label:'Toggle',
            icon:'audio',
            section:'global',
            tooltip:'Toggle'}"></button>
    <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{id:'separator',
        type:'separator',
        section:'global'}" />
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'helpButton',
            type: 'button',
            label:'Help',
            tooltip:'Help',
            icon:'help',
            section:'global'
            }"></button>
</div>


Requirements

Minimum supported client

Windows 8 [Windows Store apps only]

Minimum supported server

Windows Server 2012 [Windows Store apps only]

Minimum supported phone

Windows Phone 8.1

Namespace

WinJS.UI

Library

Ui.js

See also

WinJS.UI Namespace
AppBarCommand
AppBarIcon
BackButton
NavBar
Your first app - Part 3: PageControl objects and navigation
Navigating between pages (HTML)
Adding app bars
Adding nav bars
HTML AppBar control sample
HTML NavBar control sample
Navigation and navigation history sample
Designers
Command patterns
Navigation patterns
Guidelines for app bars
Bottom app bar
Top app bar

 

 

표시:
© 2014 Microsoft