SplitLayout API

disabled boolean false

Sets or gets whether the split layout panel is disabled.

Code example:

disabled is set to true

$('#mySplitLayout').jqxSplitLayout({disabled: true});

dataSource object false

Sets or gets the data source. The dataSource is an Array of JSON objects. Each object may have 'label', 'content', 'size', 'min', 'modifiers', 'position', 'id', 'type' and 'items' properties. 'label' and 'content' should be strings. 'modifiers' should be an array containing all or any of the following strings: 'resize', 'drag', 'close'. These determine how the user modify the layout panel. 'type' can be 'tabs' or ''. 'position' can be 'top', 'left', 'right', 'bottom'. 'items' expects an array of JSON objects for additional layout panels. 'size' expects string like '30%' or number like 30. 'min' expects a number which is the minimum size of the panel.

Code example:

$('#mySplitLayout').jqxSplitLayout({dataSource:  [{ content: 'Item 1' }, { content: 'Item 2' }, { orientation: 'horizontal', items: [ { content: 'Item 3' }, { content: 'Item 4' } ]}]});

ready function null

This function is called when the SplitLayout is initialized. It is useful for one-time content initialization.

Code example:

ready is set to a custom function

$('#mySplitLayout').jqxSplitLayout({ready: ready, exampleData: alert('ready!')});

height number 300

Sets or gets the jqxSplitLayout's height.

Code examples

Set the height property.

$("#jqxSplitLayout").jqxSplitLayout({ height: 250});

Get the height property.

var height = $('#jqxSplitLayout').jqxSplitLayout('height');

width number 300

Sets or gets the jqxSplitLayout's width.

Code examples

Set the width property.

$("#jqxSplitLayout").jqxSplitLayout({ width: 250});

Get the width property.

var width = $('#jqxSplitLayout').jqxSplitLayout('width');

resize Event

This event is triggered when a layout panel is resized.

Code example:

Bind to the resize event by type: jqxSplitLayout.

$('#jqxSplitLayout').on('resize', 
function (event) { });

stateChange Event

This event is triggered when an item is inserted or deleted. For example when you drag and drop a tab panel into another panel or when you click the close button of a tab panel.

Code example:

Bind to the resize event by type: jqxSplitLayout.

$('#jqxSplitLayout').on('resize', 
function (event) { var detail = event.detail; var type = detail.type; });

refresh Method

Properties

Code example:

Code example:

Code example:

Code examples

Code examples

Events

Code example:

Code example:

Methods