Windows Dev Center

WinJS.UI.Pivot object

Applies to Windows and Windows Phone

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

The Pivot object has these constructors.

ConstructorDescription
Pivot

Creates a new Pivot control.

 

Events

The Pivot object has these events.

EventDescription
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.

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

removeEventListener

Removes an event handler that the addEventListener method registered.

 

Properties

The Pivot object has these properties.

PropertyAccess typeDescription

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-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 supported client

Windows 8.1 [Windows Store apps only]

Minimum supported server

Windows Server 2012 R2 [Windows Store apps only]

Minimum supported phone

Windows Phone 8.1

Namespace

WinJS.UI

Library

Winjs.js

 

 

Show:
© 2015 Microsoft