EN
Dieser Inhalt ist in Ihrer Sprache leider nicht verfügbar. Im Folgenden finden Sie die englische Version.

WinJS.UI.AppBarCommand object

Applies to Windows and Windows Phone

A command to be displayed in an app bar (AppBar).

  • Applies to Windows Phone

Note  Only the first four AppBarCommand controls declared are displayed in the AppBar.

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


<button data-win-control="WinJS.UI.AppBarCommand"></button>


var object = new WinJS.UI.AppBarCommand(element, options);

Members

The AppBarCommand object has these types of members:

Constructors

The AppBarCommand object has these constructors.

ConstructorDescription
AppBarCommand

Creates a new AppBarCommand object.

 

Methods

The AppBarCommand object has these methods.

MethodDescription
addEventListener

Registers an event handler for the specified event.

dispose

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

removeEventListener

Removes an event handler registered with addEventListener.

 

Properties

The AppBarCommand object has these properties.

PropertyAccess typeDescription

disabled

Read/write

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

element

Read-only

Gets the DOM element that hosts the AppBarCommand.

extraClass

Read/write

Gets or sets additional CSS classes to apply to the element that hosts the AppBarCommand.

firstElementFocus

Read/write

Gets or sets keyboard navigation behavior in the app bar for AppBarCommand elements of type "content". This property identifies the element that receives focus within the AppBarCommand host <div> (or container) when navigating from the left.

flyout

Read/write

Gets or sets a Flyout object that is displayed when the AppBarCommand is invoked.

hidden

Read-only

Gets or sets a value that indicates whether the AppBarCommand is hidden.

icon

Read/write

Gets or sets the AppBarCommand icon.

id

Read-only

Gets or sets the AppBarCommand identifier.

label

Read/write

Gets or sets the AppBarCommand label.

lastElementFocus

Read/write

Gets or sets keyboard navigation behavior in the app bar for AppBarCommand elements of type "content". This property identifies the element that receives focus within the AppBarCommand host <div> (or container) when navigating from the right.

onclick

Read/write

Gets or sets the event handler function invoked when the AppBarCommand is clicked.

section

Read-only

Gets or sets the section of the AppBar that hosts the AppBarCommand.

selected

Read/write

Gets or sets the selected state of an AppBarCommand of type "toggle".

tooltip

Read/write

Gets or sets the tooltip of the AppBarCommand.

type

Read-only

Gets the type of the command.

 

Remarks

Styling the AppBarCommand

CSS classes

To customize the AppBarCommand, you can define your own styles for these CSS classes (defined by the Windows Library for JavaScript style sheets):

CSS classDescription

win-command

Styles the entire AppBarCommand.

win-commandicon

Styles the icon box for the AppBarCommand.

win-commandimage

Styles the image for the AppBarCommand.

win-commandring

Styles the icon ring for the AppBarCommand.

win-label

Styles the label for the AppBarCommand.

 

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 on 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.

AppBarCommand can be one of these types (see type):

  • "button"
  • "toggle"
  • "flyout"
  • "separator"
  • "content"
  • Applies to Windows Phone

Note  

AppBarCommand can be one of these types:

  • "button"
  • "toggle"

<!-- Standard app bar -->
<!-- Define the example flyout command for the app bar -->
<div id="exampleFlyout" 
     data-win-control="WinJS.UI.Flyout" aria-label="{Example flyout}">
     <div>This is an example AppBarCommand of type 'flyout'.</div>
     <button id="exampleFlyoutButton">Example flyout</button>
</div>
<!-- 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
AppBar
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

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.