WinJS.UI.SplitView object

Splits an area into two parts: a pane that can appear from an edge and a content area that fills the available space.

Syntax

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

var object = new WinJS.UI.SplitView();

Members

The SplitView object has these types of members:

• Constructors
• Events
• Methods
• Properties

Constructors

The SplitView object has these constructors.

Constructor	Description
SplitView	Creates a new SplitView.

 

Events

The SplitView object has these events.

Event	Description
onafterclose	Raised immediately after the pane is closed.
onafterhide	onafterhide is no longer available. Instead, use onafterclose. Raised immediately after the pane is hidden.
onafteropen	Raised immediately after the pane is fully open.
onaftershow	onaftershow is no longer available. Instead, use onafteropen. Raised immediately after the pane is shown.
onbeforeclose	Raised just before closing the pane. Call preventDefault on this event to stop the pane from closing.
onbeforehide	onbeforehide is no longer available. Instead, use onbeforeclose. Raised just before the pane is hidden.
onbeforeopen	Raised just before opening the pane. Call preventDefault on this event to stop the pane from opening.
onbeforeshow	onbeforeshow is no longer available. Instead, use onbeforeopen. Raised just before the pane is shown.

 

Methods

The SplitView object has these methods.

Method	Description
addEventListener	Registers an event handler for the specified event.
closePane	Closes the SplitView's pane.
dispatchEvent	Raises an event of the specified type and with additional properties.
dispose	Disposes of the SplitView control.
hidePane	hidePane is no longer available. Instead, use closePane. Hides the pane.
openPane	Opens the pane.
removeEventListener	Removes an event handler that the addEventListener method registered.
showPane	Shows the pane.

 

Properties

The SplitView object has these properties.

Property	Access type	Description
closedDisplayMode	Read/write	Gets or sets how the SplitView displays the closed pane.
ClosedDisplayMode (static)	Read-only	(Static property) Gets an enumeration that represents the display modes of a closed pane.
contentElement	Read-only	Gets the element that hosts the SplitView control's content.
element	Read-only	Gets the DOM element that hosts the SplitView.
hidden	Read/write	hidden is no longer available. Instead, use paneOpened. Gets or sets whether the pane is hidden or shown.
hiddenDisplayMode	Read/write	hiddenDisplayMode is no longer available. Instead, use closedDisplayMode. Gets or sets how the SplitView displays the hidden pane.
HiddenDisplayMode (static)	Read-only	HiddenDisplayMode (static) is no longer available, Instead, use ClosedDisplayMode (static). (Static property) Gets an enumeration that represents the display modes of a hidden pane.
openedDisplayMode	Read/write	Gets or sets how the SplitView displays the expanded pane.
OpenedDisplayMode (static)	Read-only	(Static property) Gets an enumeration that represents the display modes of a pane that is being opened.
paneElement	Read-only	Gets the element that hosts the SplitView control's pane.
paneOpened	Read/write	Gets or sets whether the pane is closed or opened.
panePlacement	Read/write	Gets or sets the location of the pane.
PanePlacement (static)	Read/write	(Static property) Gets an enumeration that represents the placement options for the pane.
shownDisplayMode	Read/write	shownDisplayMode is no longer available. Instead, use openedDisplayMode. Gets or sets how the SplitView displays the expanded pane.
ShownDisplayMode (static)	Read-only	ShownDisplayMode (static) is no longer available. Instead, use openedDisplayMode (static). (Static property) Gets an enumeration that represents the display modes of a pane that is being shown.

 

Remarks

Known Issues

SplitView controls should be direct children of document.body. Otherwise, it is possible to mask event detection on the SplitView due to stacking context effects. This is because event detection for other elements is blocked while the SplitView is open. So, if the SplitView is a child of one of those blocked elements, it too will be blocked. This behavior is typical for all overlaying controls.

CSS classes

To customize the SplitView, 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-splitview	Styles the entire SplitView.
win-splitview-content	Styles the SplitView control's content area.
win-splitview-pane	Styles the SplitView control's pane.
win-splitview-pane-closed	Styles the SplitView control's pane when the pane is closed. Replaces win-splitview-pane-hidden.
win-splitview-pane-opened	Styles the SplitView control's pane when the pane is open.

 

Requirements

Minimum WinJS version	WinJS 4.0
Namespace	WinJS.UI