WinJS.UI.Hub object

Article
01/26/2017

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

Partager via