Sets the splitter width.

Code examples

Initialize a jqxSplitter with the width property specified.

$('#jqxSplitter').jqxSplitter({width: '200px'});

Sets the splitter's height.

Code examples

Initialize a jqxSplitter with the height property specified.

$('#jqxSplitter').jqxSplitter({ height:"300px" }); 

Sets or get's panels properties.

Code examples

Initialize a jqxSplitter with the panels property specified.

$('#jqxSplitter').jqxSplitter(

    {panels:[ 

    { min: 300, max:'450px', size: 330, 

        collapsible: false, collapsed: false, resizable: true }, 

    { min: 100, max:'550px', 

        collapsible: true, collapsed: false, resizable: true }]});

                        

Sets or get's splitter's orientation.

Code examples

Initialize a jqxSplitter with the orientation property specified.

$('#jqxSplitter').jqxSplitter({orientation:"vertical"});

Sets or get's whether the splitter layout is going to be saved in cookies on it's change.

Code examples

Initialize a jqxSplitter with the cookies property specified.

$('#jqxSplitter').jqxSplitter({cookies: true});

Sets or get's cookies options.

Code examples

Initialize a jqxSplitter with the cookieOptions property specified.

$('#jqxSplitter').jqxSplitter({cookieOptions: {domain: 'jqwidgets.com', expires: 90}});

Sets or gets whether the collapse animation is enabled.

Code examples

Initialize a jqxSplitter with the enableCollapseAnimation property specified.

$('#jqxSplitter').jqxSplitter({enableCollapseAnimation: false});

Sets or gets the animation duration.

Code examples

Initialize a jqxSplitter with the animationDuration property specified.

$('#jqxSplitter').jqxSplitter({animationDuration: 300});

Gets or sets whether the splitter is disabled.

Code examples

Initialize a jqxSplitter with the disabled property specified.

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

Gets or sets splitbar's size.

Code examples

Initialize a jqxSplitter with the splitBarSize property specified.

$('#jqxSplitter').jqxSplitter({ splitBarSize: '15px' }); 

Gets or sets splitbar's size when a touch device is used.

Code examples

Initialize a jqxSplitter with the touchSplitBarSize property specified.

$('#jqxSplitter').jqxSplitter({ touchSplitBarSize: '15px' }); 

Resize event is triggered when panels are resized.

Code examples

Bind to the resize event by type: jqxSplitter.

$('#jqxSplitter').bind('resize', function (event) { // Some code here. }); 

Expanded is triggered when any panel have been expanded.

Code examples

Bind to the expanded event by type: jqxSplitter.

$('#jqxSplitter').bind('expanded', function (event) { // Some code here. }); 

Resize start is triggered when any split bar start being dragged.

Code examples

Bind to the resizeStart event by type: jqxSplitter.

$('#jqxSplitter').bind('resizeStart', function (event) { // Some code here. }); 

Collapsed event is triggered when any panel have been collapsed.

Code examples

Bind to the collapsed event by type: jqxSplitter.

$('#jqxSplitter').bind('collapsed', function (event) { // Some code here. }); 

Exporting the current panel's state into a JSON string.

Code example

Invoke the exportLayout method.

 $('#jqxSplitter').jqxSplitter('exportLayout');

Setting splitter layout with a JSON string.

Code example

Invoke the importLayout method.

$('#jqxSplitter').jqxSplitter('setTitle', '

    { "panels": [

    {"max":"200","min":"100","collapsible":"false","resizable":"true",

        "collapsed":"false","size":"100" },

    {"collapsible":"true","resizable":"true",

        "collapsed":"false","size":"150" },

    {"min":"0","collapsible":"true","resizable":"true",

        "collapsed":"false","size":"10" },

    {"min":"0","collapsible":"true","resizable":"true",

        "collapsed":"false","size":"1319" }],

    "orientation": "horizontal" }');

                        

Expanding specific panel if it's allready have been collapsed.

Code example

Invoke the expandAt method.

$('#jqxSplitter').jqxSplitter('expandAt', 3);

Collapsing specific panel if it's expanded.

Code example

Invoke the collapseAt method.

$('#jqxSplitter').jqxSplitter('collapseAt', 3);

Disabling the splitter

Code example

Invoke the disable method.

$('#jqxSplitter').jqxSplitter('disable');

Enabling the splitter

Code example

Invoke the enable method.

$('#jqxSplitter').jqxSplitter('enable');

Updates the splitter's layout

Code example

Invoke the refresh method.

$('#jqxSplitter').jqxSplitter('refresh');

Showing collapse button on specific split bar.

Code example

Invoke the showCollapseButtonAt method.

$('#jqxSplitter').jqxSplitter('showCollapseButtonAt', 1);

Hiding collapse button on specific split bar.

Code example

Invoke the hideCollapseButtonAt method.

$('#jqxSplitter').jqxSplitter('hideCollapseButtonAt', 1);