WinJS.UI.Pivot object

Creates a tab control that displays multiple items.

Syntax

<div data-win-control="WinJS.UI.Pivot"></div>

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

Members

The Pivot object has these types of members:

• Constructors
• Events
• Methods
• Properties

Constructors

The Pivot object has these constructors.

Constructor	Description
Pivot	Creates a new Pivot control.

 

Events

The Pivot object has these events.

Event	Description
onitemanimationend	Raised when a PivotItem control's animation ends
onitemanimationstart	Raised when a PivotItem control's animation starts.
onselectionchanged	Raised when the PivotItem changes.

 

Methods

The Pivot 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 Pivot. Call this method when the Pivot is no longer needed. After calling this method, the Pivot becomes unusable.
forceLayout	Forces a relayout of the Pivot contents.
removeEventListener	Removes an event handler that the addEventListener method registered.

 

Properties

The Pivot object has these properties.

Property	Access type	Description
customLeftHeader	Read/write	Gets or sets the left custom header content in the Pivot control.
customRightHeader	Read/write	Gets or sets the right custom header content in the Pivot control.
element	Read-only	Gets the DOM element that hosts the Pivot control.
items	Read/write	Gets or sets the List that contains the PivotItem objects that belong to this Pivot.
locked	Read/write	Gets or sets a value that specifies whether the Pivot control is locked to the current item.
selectedIndex	Read/write	Gets or sets the index of the PivotItem control in view.
selectedItem	Read/write	Gets or sets the PivotItem control in view within the Pivot control.
title	Read/write	Gets or sets the title displayed above the headers container for the entire pivot.

 

Remarks

Styling the Pivot

CSS classes

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

CSS class	Description
win-pivot	Styles the entire Pivot control.
win-pivot-header	Styles a header in the Pivot control
win-pivot-headers	Styles the headers container (the element in which individual header elements are contained).
win-pivot-header-selected	Styles the selected header.
win-pivot-header-leftcustom	Styles the customLeftHeader container.
win-pivot-header-rightcustom	Styles the customRightHeader container.
win-pivot-locked	Styles the Pivot control when it is locked.
win-pivot-navbutton	Styles the navigation buttons that appear when using mouse input.
win-pivot-navbutton-next	Styles the navigation button that goes to the next PivotItem.
win-pivot-navbutton-prev	Styles the navigation button that goes to the previous PivotItem.
win-pivot-shownavbuttons	Styles the headers container when navigation buttons are visible.
win-pivot-slide1, win-pivot-slide2, win-pivot-slide3	Specifies possible slide animation delays. win-pivot-slide1 specifies the shortest delay, win-pivot-slide2 an average delay, and win-pivot-slide3 the longest delay. A code example using these CSS classes can be found in the HTML Pivot control sample.
win-pivot-title	Styles the title of the Pivot control.
win-pivot-viewport	Styles the viewport of the Pivot control.

 

Note   For Windows, this member is available starting with the WinJS 3.0 library. The WinJS 3.0 library is available via CDN, package manager, or website download but currently not through the Windows Store as a Windows Store framework package.

 

Requirements

Minimum WinJS version	Phone WinJS 2.1
Namespace	WinJS.UI