Sets or gets whether the split layout panel is disabled.

Code example:

disabled is set to true

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

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' } ]}]});

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!')});

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');

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');

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) { });

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; });

refreshes the layout and re-arranges the panels