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 |
---|---|---|
Read-only |
Specifies the type of Hub animation used when a contentanimating event is raised. |
|
Read-only |
Gets the DOM element that hosts the Hub control. |
|
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. |
|
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. |
|
Read-only |
Gets the index of last HubSection at least partially in view. Used for animating the visible content in the Hub. |
|
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. |
|
Read/write |
Gets or sets the orientation of sections within the Hub. |
|
Read/write |
Gets or sets the distance between the start of the Hub and the current viewable area. |
|
Read/write |
Gets or sets the index of the first visible HubSection. |
|
Read/write |
Gets or sets the List that contains the HubSection objects that belong to this Hub. |
|
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
Your first app - Part 3: PageControl objects and navigation
Quickstart: Using a hub control for layout and navigation
Navigating between pages (HTML)
Navigation and navigation history sample
Designers
Guidelines for the hub control