Compartir a través de


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