Ignite UI™ API Documentation

ui.igSplitter

The splitter is a widget based on jQuery UI that manages layout into two panels with split bar and provides the end user with a rich interaction functionality including the ability to expand/collapse panel, and resize panels via split bar.

Code Sample

<!doctype html>
<html>
<head>
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Loader Script -->
    <script src="js/infragistics.loader.js" type="text/javascript"></script>
    <!-- Infragistics Loader Initialization -->
    <script type="text/javascript">
        $.ig.loader({
            scriptPath: "js/",
            cssPath: "css/",
            resources: "igSplitter"
        });
 
        $.ig.loader(function () {
            $("#splitter").igSplitter({
                height: "500px",
                width: "700px",
                panels: [
                    { size: "300px", min: "250px", max: "350px", collapsible: true },
                    { collapsible: true }
                ]
            });
        });
    </script>
</head>
<body>
    <div id="splitter">
        <div>First Panel</div>
        <div>Second Panel</div>
    </div>
</body>
</html>

Related Samples

language
Inherited

Type:: string
Default:: "en"

Set/Get the locale language setting for the widget.

Code Sample

    //Initialize
$(".selector").igSplitter({
    language: "ja"
});
 
// Get
var language = $(".selector").igSplitter("option", "language");
 
// Set
$(".selector").igSplitter("option", "language", "ja");

locale
Inherited

Type:

object

Default:

null

Set/Get the locale setting for the widget.

Code Sample

//Initialize
$(".selector").igSplitter({
locale: {}
});

// Get
var locale = $(".selector").igSplitter("option", "locale");

// Set
$(".selector").igSplitter("option", "locale", {});

orientation

Type:: enumeration
Default:: vertical

Specifies the orientation of the splitter.

Members

vertical
Type:string
horizontal
Type:string

Code Sample

// Initialize
$('.selector').igSplitter({
    orientation: "horizontal"
});
// Get
var height = $('.selector').igSplitter("option", "orientation");
// Set
$('.selector').igSplitter("option", "orientation", "horizontal");

panels

Type:: array
Default:: []
Elements Type:: object

Array of objects options that specify the panels settings. The panels are no more than two. Settings are specified via enumeration.

Code Sample

$("#splitter").igSplitter({
    panels: [
        {size: "50%", min: "40%", max: "55%", collapsed: true, collapsible: true},
        {collapsible: true}
    ]
});
 
// Get
var panels = $(".selector").igSplitter("option", "panels");
panels[0].size;

collapsed

Type:

bool

Default:

false

Gets whether the panel is initially collapsed.

Code Sample

// Initialize
$('.selector').igSplitter({
    panels: [{
        collapsed: true
    }]
});

// Get
var panels = $(".selector").igSplitter("option", "panels");
panels[0].collapsed;
collapsible

Type:

bool

Default:

false

Gets whether the panel can be collapsed.

Code Sample

// Initialize
$('.selector').igSplitter({
    panels: [{
        collapsible: true
    }]
});

// Get
var panels = $(".selector").igSplitter("option", "panels");
panels[0].collapsible;
max

Type:

enumeration

Default:

null

Gets the maximum size that the panel can have.

Code Sample

// Initialize
$('.selector').igSplitter({
    panels: [{
        max: "600px"
    }]
});
// Get
var panels = $(".selector").igSplitter("option", "panels");
panels[0].max;
min

Type:

enumeration

Default:

null

Gets the minimum size that the panel can have.

Code Sample

// Initialize
$('.selector').igSplitter({
    panels: [{
        min: "200px"
    }]
});
// Get
var panels = $(".selector").igSplitter("option", "panels");
panels[0].min;
resizable

Type:

bool

Default:

false

Gets whether the panel can be resized.

Code Sample

// Initialize
$('.selector').igSplitter({
    panels: [{
        resizable: true
    }]
});

// Get
var panels = $(".selector").igSplitter("option", "panels");
panels[0].resizable;
size

Type:

enumeration

Default:

null

Gets the size of the panel.

Code Sample

// Initialize
$('.selector').igSplitter({
    panels: [{
        size: "300px"
    }]
});
// Get
var panels = $(".selector").igSplitter("option", "panels");
panels[0].size;

regional
Inherited

Type:

enumeration

Default:

defaults

Set/Get the regional setting for the widget.

Code Sample

//Initialize
$(".selector").igSplitter({
regional: "ja"
});
// Get
var regional = $(".selector").igSplitter("option", "regional");
// Set
$(".selector").igSplitter("option", "regional", "ja");
resizeOtherSplitters

Type:

bool

Default:

true

Specifies whether the other splitters on the page will be resized as this splitter resizes.

Code Sample

// Initialize
$('.selector').igSplitter({
resizeOtherSplitters: false
});

// Get
var resizeSplitters = $('.selector').igSplitter("option", "resizeOtherSplitters");
width

Type:

enumeration

Default:

null
Gets/Sets the width of the container.
Members
- null
- Type:object
- will stretch to fit data, if no other widths are defined.
- string
- The widget width can be set in pixels (px) and percentage (%).
- number
- The widget width can be set as a number in pixels.
Code Sample

// Initialize
$('.selector').igSplitter({
width: "500px"
});
// Get
var width = $('.selector').igSplitter("option", "width");
// Set
$('.selector').igSplitter("option", "width", "500px");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

collapsed

Cancellable:: false

Fired after collapsing is performed

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.
Use ui.index to get an index of collapsed panel.

Code Sample

//Bind after initialization
$(document).on("igsplittercollapsed", ".selector", function (evt, ui) {
    // reference to igSplitter
    ui.owner;
    // index of the collapsed panel
    ui.index;
});
 
// Initialize
$(".selector").igSplitter({
    collapsed: function(evt, ui) {...}
});

expanded

Cancellable:: false

Fired after expanding is performed

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.
Use ui.index to get an index of expanded panel.

Code Sample

//Bind after initialization
$(document).on("igsplitterexpanded", ".selector", function (evt, ui) {
    // reference to igSplitter
    ui.owner;
    // index of the expanded panel
    ui.index;
});
 
// Initialize
$(".selector").igSplitter({
    expanded: function(evt, ui) {...}
});

layoutRefreshed

Cancellable:: false

Fired after the panels are refreshed because of browser"s resizing.

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.

Code Sample

//Bind after initialization
$(document).on("igsplitterlayoutrefreshed", ".selector", function (evt, ui) {
    // reference to igSplitter
    ui.owner;
});
 
// Initialize
$(".selector").igSplitter({
    layoutRefreshed: function(evt, ui) {...}
});

layoutRefreshing

Cancellable:: true

Fired before the panels are refreshed because of browser"s resizing.

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.

Code Sample

//Bind after initialization
$(document).on("igsplitterlayoutrefreshing", ".selector", function (evt, ui) {
    // reference to igSplitter
    ui.owner;
});
 
// Initialize
$(".selector").igSplitter({
    layoutRefreshing: function(evt, ui) {...}
});

resizeEnded

Cancellable:: false

Fired after split bar move is performed

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.

Code Sample

//Bind after initialization
$(document).on("igsplitterresizeended", ".selector", function (evt, ui) {
    // reference to igSplitter
    ui.owner;
});
 
// Initialize
$(".selector").igSplitter({
    resizeEnded: function(evt, ui) {...}
});

resizeStarted

Cancellable:: false

Fired before split bar move is performed

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.

Code Sample

//Bind after initialization
$(document).on("igsplitterresizestarted", ".selector", function (evt, ui) {
    // reference to igSplitter
    ui.owner;
});
 
// Initialize
$(".selector").igSplitter({
    resizeStarted: function(evt, ui) {...}
});

resizing

Cancellable:: true

Fired while split bar move is performed

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.

Code Sample

//Bind after initialization
$(document).on("igsplitterresizing", ".selector", function (evt, ui) {
    // reference to igSplitter
    ui.owner;
});
 
// Initialize
$(".selector").igSplitter({
    resizing: function(evt, ui) {...}
});

Show Details

changeGlobalLanguage
Inherited

.igSplitter( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample

$(".selector").igSplitter("changeGlobalLanguage");
changeGlobalRegional
Inherited

.igSplitter( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample

$(".selector").igSplitter("changeGlobalRegional");
changeLocale
Inherited

.igSplitter( "changeLocale", $container:object );
Changes the all locales contained into a specified container to the language specified in options.language
Note that this method is for rare scenarios, use language or locale option setter.
- $container
- Type:object
- Optional parameter - if not set it would use the element of the widget as $container.
Code Sample

$(".selector").igSplitter("changeLocale");
collapseAt

.igSplitter( "collapseAt", index:object );
Collapse the specified panel.
- index
- Type:object
- Specifies the index of the panel to collapse.
Code Sample

$(".selector").igSplitter("collapseAt", 0);
destroy

.igSplitter( "destroy" );
Destroys the igSplitter widget.
Code Sample

$(".selector").igSplitter("destroy");
expandAt

.igSplitter( "expandAt", index:object );
Expand the specified panel by index.
- index
- Type:object
- Specifies the index of the panel to expand.
Code Sample

$(".selector").igSplitter("expandAt", 1);
firstPanel

.igSplitter( "firstPanel" );

Return Type:

object

Return Type Description:

Returns the jQuery object of the first panel element.
Retrieves the jQuery element of the first panel.
Code Sample

var panel = $(".selector").igSplitter("firstPanel");
refreshLayout

.igSplitter( "refreshLayout" );
Refresh splitter layout, use this method to re-render the splitter if some changes to the layout are applied.
Code Sample

$(".selector").igSplitter("refreshLayout");
secondPanel

.igSplitter( "secondPanel" );

Return Type:

object

Return Type Description:

Returns the jQuery object of the second panel element.
Retrieves the jQuery element of the second panel.
Code Sample

var panel = $(".selector").igSplitter("secondPanel");
setFirstPanelSize

.igSplitter( "setFirstPanelSize", size:object );
You can set new size of the first panel after the splitter is rendered.
- size
- Type:object
- Specifies the new size of the first panel.
Code Sample

$(".selector").igSplitter("setFirstPanelSize", 100);
setSecondPanelSize

.igSplitter( "setSecondPanelSize", size:object );
You can set new size of the second panel after the splitter is rendered.
- size
- Type:object
- Specifies the new size of the second panel.
Code Sample

$(".selector").igSplitter("setSecondPanelSize", 100);
widget

.igSplitter( "widget" );

Return Type:

object

Return Type Description:

Returns the element that represents this widget.
Returns the element that represents this widget.
Code Sample

var widget = $(".selector").igSplitter("widget");

ui-igsplitter-splitbar

Class applied to the split bar in the splitter.
ui-igsplitter-splitbar-focus ui-state-focus

Classes defining the focus state style of the split bar.
ui-igsplitter-splitbar-collapsed

Class defining the collapsed state style of the split bar.
ui-igsplitter-splitbar-hover ui-state-hover

Classes defining the hover state style of the split bar.
ui-igsplitter-splitbar-invalid

Class defining the invalid state style of the split bar.
ui-igsplitter-splitbar-default ui-state-default

Classes defining the default state style of the split bar.
ui-state-default

Class defining the default state style of the button.
ui-igsplitter-collapse-button-hover ui-state-hover

Classes defining the hover state style of the button.
ui-igsplitter-collapse-button-pressed

Class defining the pressed state style of the button.
ui-igsplitter-collapse-single-button

Class applied to a button in the split bar when it is single.
ui-igsplitter-collapse-button-horizontal-left

Class applied to the left horizontal collapse button in the split bar when it is collapsed.
ui-icon ui-icon-triangle-1-s

Class defining the right collapsed button icon in horizontal orientation.
ui-igsplitter-collapse-button-horizontal-left

Class applied to the left horizontal collapse button in the split bar when it is expanded.
ui-icon ui-icon-triangle-1-n

Class defining the left expanded button icon in horizontal orientation.
ui-igsplitter-collapse-button-horizontal-right

Class applied to the right horizontal collapse button in the split bar when it is collapsed.
ui-icon ui-icon-triangle-1-n

Class defining the right collapsed button icon in horizontal orientation.
ui-igsplitter-collapse-button-horizontal-right

Class applied to the right horizontal collapse button in the split bar when it is expanded.
ui-icon ui-icon-triangle-1-s

Class defining the right expanded button icon in horizontal orientation.
ui-igsplitter-panel-horizontal ui-widget-content

Classes applied to the horizontal panel in the splitter.
ui-igsplitter-no-scroll

Classes disabling the panel scrolling while width is zero.
ui-igsplitter-splitbar-resize-handler

Class applied to the resize handler in the split bar.
ui-igsplitter-splitbar-resize-handler-inner

Class applied to the inner resize handler in the split bar.
ui-igsplitter ui-widget ui-widget-content

Classes applied to the top container element.
ui-igsplitter-collapse-button-vertical-left

Class applied to the left vertical collapse button in the split bar when it is collapsed.
ui-icon ui-icon-triangle-1-e

Class defining the left collapsed button icon in vertical orientation.
ui-igsplitter-collapse-button-vertical-left

Class applied to the left vertical collapse button in the split bar when it is expanded.
ui-icon ui-icon-triangle-1-w

Classes defining the left expanded collapse button icon in vertical orientation.
ui-igsplitter-collapse-button-vertical-right

Class applied to the right vertical button in the split bar when it is collapsed.
ui-icon ui-icon-triangle-1-w

Class defining the right collapsed button icon in vertical orientation.
ui-igsplitter-collapse-button-vertical-right

Class applied to the right vertical collapse button in the split bar when it is expanded.
ui-icon ui-icon-triangle-1-e

Class defining the right expanded button icon in vertical orientation.
ui-igsplitter-panel-vertical ui-widget-content

Classes applied to the vertical panel in the splitter.

Ignite UI for jQuery | API Reference

ui.igSplitter

Code Sample

Related Samples

Related Topics

Dependencies

Inherits