WinJS.UI.NavBarContainer object

Applies to Windows only

Container for a group of NavBarCommand objects in a NavBar.

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.NavBarContainer">
</div>


var object = new WinJS.UI.NavBarContainer();

Members

The NavBarContainer object has these types of members:

Constructors

The NavBarContainer object has these constructors.

ConstructorDescription
NavBarContainer

Creates a new NavBarContainer.

 

Events

The NavBarContainer object has these events.

EventDescription
oninvoked

Occurs when a child NavBarCommand object's click event fires.

onsplittoggle

Occurs when the splitButton of a child NavBarCommand is opened or closed. A split button is toggled when the user navigates to another page or opens another split button.

 

Methods

The NavBarContainer 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 NavBarContainer. Call this method when the NavBarContainer is no longer needed. After calling this method, the NavBarCommand becomes unusable.

forceLayout

Forces the NavBarContainer to update its layout. Use this function when making the NavBarContainer visible again after you set its style.display property to "none".

removeEventListener

Removes an event handler registered through the addEventListener method.

 

Properties

The NavBarContainer object has these properties.

PropertyAccess typeDescription

currentIndex

Read/write

Gets or sets the index of the current (focused) item.

data

Read/write

Gets or sets a WinJS.Binding.List that generates NavBarCommand objects.

element

Read/write

Gets the DOM element that hosts the NavBarContainer.

fixedSize

Read/write

Gets or sets a value that specifies whether NavBarCommand objects in this container use a fixed or dynamic width.

layout

Read/write

Gets or sets a value that specifies whether the NavBarContainer has a horizontal or vertical layout.

maxRows

Read/write

Gets or sets a value that specifies how many rows of navigation commands to display on a page.

template

Read/write

Gets or sets the WinJS.Binding.Template or templating function that creates the DOM elements for each item in the data source. Each item can contain multiple elements, but it must have a single root element.

 

Remarks

CSS classes

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

CSS classDescription

win-navbarcontainer

Styles the entire NavBarContainer.

win-navbarcontainer-horizontal

Styles the NavBarContainer when it has a horizontal layout.

win-navbarcontainer-navarrow

Styles both page arrows in the page indicator box.

win-navbarcontainer-navleft

Styles the left page arrow.

win-navbarcontainer-navright

Styles the right page arrow.

win-navbarcontainer-pageindicator-box

Styles the page indicator box.

win-navbarcontainer-pageindicator-current

Styles the page indicator box's current page indicator.

win-navbarcontainer-surface

Styles the area that contains NavBarCommand objects.

win-navbarcontainer-vertical

Styles a NavBarContainer when has a vertical layout.

win-navbarcontainer-viewport

Styles the viewport, which includes the NavBarContainer and the scrollbar.

 

Requirements

Minimum supported client

Windows 8.1 [Windows Store apps only]

Minimum supported server

Windows Server 2012 R2 [Windows Store apps only]

Minimum supported phone

None supported

Namespace

WinJS.UI

Library

Ui.js

See also

WinJS.UI Namespace
NavBar
NavBarCommand
BackButton
AppBar
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

 

 

Show:
© 2014 Microsoft. All rights reserved.