WinJS.UI.Hub object

Creates a hub navigation pattern consisting of sections that can be navigated to. Each section is defined by a HubSection object.

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

Syntax

<div data-win-control="WinJS.UI.Hub">
</div>
var object = new WinJS.UI.Hub();

Members

The Hub object has these types of members:

  • Constructors
  • Events
  • Methods
  • Properties

Constructors

The Hub object has these constructors.

Constructor Description
Hub

Creates a new Hub control.

 

Events

The Hub object has these events.

Event Description
oncontentanimating

Raised when the Hub is about to play entrance, content transition, insert, or remove animations.

onheaderinvoked

Raised when the user clicks on an interactive header.

onloadingstatechanged

Raised when the Hub control's loadingState changes.

 

Methods

The Hub object has these methods.

Method Description
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 Hub. Call this method when the Hub is no longer needed. After calling this method, the Hub becomes unusable.

removeEventListener

Removes an event handler that the addEventListener method registered.

 

Properties

The Hub object has these properties.

Property Access type Description

AnimationType

Read-only

Specifies the type of Hub animation used when a contentanimating event is raised.

element

Read-only

Gets the DOM element that hosts the Hub control.

headerTemplate

Read/write

Gets or sets the Template or templating function that creates the DOM elements for each HubSection header. Your HubSection object should provide strings for HubSection.header property.

indexOfFirstVisible

Read-only

Gets the index of the first HubSection at least partially in view. This property is useful for animating the visible content in the Hub.

indexOfLastVisible

Read-only

Gets the index of last HubSection at least partially in view. Used for animating the visible content in the Hub.

loadingState

Read-only

Gets a value that indicates whether the hub is still loading or whether loading is complete. The value changes to complete after all the sections and content inside them has loaded.

orientation

Read/write

Gets or sets the orientation of sections within the Hub.

scrollPosition

Read/write

Gets or sets the distance between the start of the Hub and the current viewable area.

sectionOnScreen

Read/write

Gets or sets the index of the first visible HubSection.

sections

Read/write

Gets or sets the List that contains the HubSection objects that belong to this Hub.

zoomableView

Read-only

This API supports the SemanticZoom infrastructure and is not intended to be used directly from your code.

 

Remarks

Customization

In Windows 8.x, a non-static Hub Section would have a small chevron next to that section's title to indicate a link to more content beyond the sample in the visible screen area. The chevron has been replaced in Windows 10 by a link with the text "See more." While functionally identical to the old chevron, the see also link can be easily modified by changing the text in the ui.resjson resource file for the language of interest. Simply locate the line "seeMore": "See more", and change the text "See more" as required. This feature also facilitates easier localization.

Requirements

Minimum WinJS version

WinJS 2.0

Namespace

WinJS.UI

See also

WinJS.UI Namespace

HubSection

AppBar

NavBar

BackButton

Your first app - Part 3: PageControl objects and navigation

Quickstart: Using a hub control for layout and navigation

Navigating between pages (HTML)

Adding app bars

Adding nav bars

HTML Hub control sample

HTML AppBar control sample

HTML NavBar control sample

Navigation and navigation history sample

Designers

Command patterns

Navigation patterns

Hub

Guidelines for the hub control