Sets or gets the disabled property.

Code examples

Set the disabled property.

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

Get the disabled property.

var disabled = $('#jqxSplitter').jqxSplitter('disabled');

Sets or gets the jqxSplitter's height.

Code examples

Set the height property.

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

Get the height property.

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

Sets or gets the orientation property.

Code examples

Set the orientation property.

$('#jqxSplitter').jqxSplitter({ width: 600, height: 480, orientation: 'horizontal', panels: [{ size: 300 }, { size: 300}] });

Get the orientation property.

var orientation = $('#jqxSplitter').jqxSplitter('orientation');

Sets or gets the panels property.

Each panel represents an Object with the following fields.

• size - sets the panel's size.
• min - sets the panel's minimum size.
• collapsible - sets whether the panel is collapsible.
• collapsed - sets whether the panel is collapsed.

Code examples

Set the panels property.

$('#jqxSplitter').jqxSplitter({ width: 600, height: 480, panels: [{ size: 300 }, { size: 300}] });

Get the panels property.

var panels = $('#jqxSplitter').jqxSplitter('panels');

Sets or gets the resizable property. When this property is set to false, the user will not be able to move the split bar.

Code examples

Set the resizable property.

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

Get the resizable property.

var resizable = $('#jqxSplitter').jqxSplitter('resizable');

Sets or gets the size of the split bar.

Code examples

Set the splitBarSize property.

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

Get the splitBarSize property.

var splitBarSize = $('#jqxSplitter').jqxSplitter('splitBarSize');

Sets or gets whether the split bar is displayed.

Code examples

Set the showSplitBar property.

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

Get the showSplitBar property.

var showSplitBar = $('#jqxSplitter').jqxSplitter('showSplitBar');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Sets or gets the jqxSplitter's width.

Code examples

Set the width property.

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

Get the width property.

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

This event is triggered when a panel is collapsed.

Code example

Bind to the collapsed event by type: jqxSplitter.

$('#jqxSplitter').on('collapsed', 
function (event) {       
    var panels = event.args.panels;
    // get first panel.
    var panel1 = panels[0];
    // get second panel.
    var panel2 = panels[1];
    // panel index.
    var index = event.args.index;
});
                         

This event is triggered when a panel is expanded.

Code example

Bind to the expanded event by type: jqxSplitter.

$('#jqxSplitter').on('expanded', 
function (event) {       
    var panels = event.args.panels;
    // get first panel.
    var panel1 = panels[0];
    // get second panel.
    var panel2 = panels[1];
    // panel index.
    var index = event.args.index;
});
                         

This event is triggered when the 'resize' operation has ended.

Code example

Bind to the resize event by type: jqxSplitter.

$('#jqxSplitter').on('resize', 
function (event) {       
    var panels = event.args.panels;
    // get first panel.
    var panel1 = panels[0];
    // get second panel.
    var panel2 = panels[1];
});
                         

This event is triggered when the 'resizeStart' operation has started.

Code example

Bind to the resizeStart event by type: jqxSplitter.

$('#jqxSplitter').on('resizeStart', 
function (event) {       
    var panels = event.args.panels;
    // get first panel.
    var panel1 = panels[0];
    // get second panel.
    var panel2 = panels[1];
});
                         

Collapse a panel.

Code example

Invoke the collapse method.

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

Destroys the jqxSplitter. This method will remove the jqxSplitter from the DOM and will remove all internal event handlers and styles.

Code example

Invoke the destroy method.

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

Disables the jqxSplitter.

Code example

Invoke the disable method.

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

Enables the jqxSplitter.

Code example

Invoke the enable method.

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

Expands a panel.

Code example

Invoke the expand method.

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

Renders the jqxSplitter.

Code example

Invoke the render method.

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

Refreshes the jqxSplitter. This method will perform a layout and will arrange the split panels.

Code example

Invoke the refresh method.

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