ejSplitter

11 Jul 201819 minutes to read

The Splitter is a layout control that enables you to divide a Web page into distinct areas by inserting resizable panes. You can create any number of Splitter panes and place them inside the Splitter control. The split bars are inserted automatically in between the adjacent panes.

Syntax

  • JAVASCRIPT
    • $(element).ejSplitter(options)
    Name Type Description
    options Object settings for Splitter.

    Example

  • HTML
    • <div id="innerSplitter">
        <div>
                <div class="cont">Pane 1 </div>
        </div>
        <div>
                <div class="cont">Pane 2 </div>
        </div>
</div> 
<script>
// Create Splitter 
$('#innerSplitter').ejSplitter(); 
</script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.splitter.js

    Members

    allowKeyboardNavigation boolean

    Turns on keyboard interaction with the Splitter panes. You must set this property to true to access the keyboard shortcuts of ejSplitter.

    Default Value

    • true

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//To set allowKeyboardNavigation API value during initialization
        $("#innerSplitter").ejSplitter({allowKeyboardNavigation: false});
</script>

    animationSpeed number

    Specify animation speed for the Splitter pane movement, while collapsing and expanding.

    Default Value

    • 300

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//To set animationSpeed API value during initialization
$("#innerSplitter").ejSplitter({animationSpeed: 150 });
</script>

    cssClass string

    Specify the CSS class to splitter control to achieve custom theme.

    Default Value

    • “”

    Example

  • HTML
    • <div id="innerSplitter">
        <div>
                <div class="cont">Pane 1 </div>
        </div>
        <div>
                <div class="cont">Pane 2 </div>
        </div>
</div> 
<script>
//To set cssClass API value during initialization
        $("#innerSplitter").ejSplitter({ cssClass: "gradient-lime"});
</script>

    enableAnimation boolean

    Specifies the animation behavior of the splitter.

    Default Value

    • true

    Example

  • HTML
    • <div id="innerSplitter">
        <div>
                <div class="cont">Pane 1 </div>
        </div>
        <div>
                <div class="cont">Pane 2 </div>
        </div>
</div> 
<script>
//To set enableAnimation API value during initialization  
        $("#innerSplitter").ejSplitter({ enableAnimation: false});
</script>

    enableRTL boolean

    Specifies the splitter control to be displayed in right to left direction.

    Default Value

    • false

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//To set enableRTL API value during initialization  
        $("#innerSplitter").ejSplitter({enableRTL: true} );
</script>

    expanderTemplate string

    Specifies HTML element string to replace the existing expand/collapse icons.

    Default Value

    • null

    Example

  • HTML
    • <div id="innerSplitter">
        <div>
        <div class="cont">Pane 1 </div>
        </div>
        <div>
        <div class="cont">Pane 2 </div>
        </div>
        </div> 
        <script>
        //To set expanderTemplate API value during initialization
                $("#innerSplitter").ejSplitter({ expanderTemplate: '<img class="eimg" src="expander.png" alt="employee"/>', });
        </script>

    height string

    Specify height for splitter control.

    Default Value

    • null

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//To set height API value during initialization
        $("#innerSplitter").ejSplitter({height: "100%" });
</script>

    htmlAttributes Object

    Specifies the HTML Attributes of the Splitter.

    Default Value

    • {}

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//Set HtmlAttributes API during initialization
        $("#innerSplitter").ejSplitter({htmlAttributes: {class:"my-class"}});
</script>

    isResponsive boolean

    Specify window resizing behavior for splitter control.

    Default Value

    • false

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//To set isResponsive API value during initialization
        $("#innerSplitter").ejSplitter({isResponsive: true});
</script>

    NOTE

    We have renamed the API “enableAutoResize” to “isResponsive”.

    orientation enum

    Specify the orientation for splitter control. See orientation

    Name Description
    Horizontal To set the horizontal orientation for splitter control
    Vertical To set the vertical orientation for splitter control

    Default Value

    • ej.orientation.Horizontal or “horizontal”

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//To set orientation API value during initialization  
$("#innerSplitter").ejSplitter({ orientation: ej.Orientation.Horizontal });
</script>

    properties Array

    Specify properties for each pane like paneSize, minSize, maxSize, collapsible, expandable, resizable.

    Default Value

    • []

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//To set properties API value during initialization  
        $("#innerSplitter").ejSplitter({properties: [{ paneSize: "100px", expandable:false }, { collapsible:false, paneSize: "50px"}]});
</script>

    width string

    Specify width for splitter control.

    Default Value

    • null

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//To set width API value during initialization  
        $("#innerSplitter").ejSplitter({width: 600} );
</script>

    Methods

    addItem(content, property, index)

    To add a new pane to splitter control.

    Name Type Description
    content string content of pane.
    property Object pane properties.
    index number index of pane.

    Returns:

    Element

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<script>
$("#innerSplitter").ejSplitter();
// Create splitter control
var splitterObj = $("#innerSplitter").data("ejSplitter");
splitterObj.addItem("New pane 0",{ paneSize:20, minSize:20, maxSize:100},0);
</script>
  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<script>
$("#innerSplitter").ejSplitter();
// expand the splitter control
$("#innerSplitter").ejSplitter("addItem","New pane 0",{ paneSize:20, minSize:20, maxSize:100},0);
</script>

    collapse(paneIndex)

    To collapse the splitter control pane.

    Name Type Description
    paneIndex number index number of pane.

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<script>
$("#innerSplitter").ejSplitter();
// Create splitter control
var splitterObj = $("#innerSplitter").data("ejSplitter");
splitterObj.collapse(0); // collapse the splitter control pane.
</script>
  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<script>
$("#innerSplitter").ejSplitter();
// collapse the splitter control
$("#innerSplitter").ejSplitter("collapse", 0);
</script>

    expand(paneIndex)

    To expand the splitter control pane.

    Name Type Description
    paneIndex number index number of pane.

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<script>
$("#innerSplitter").ejSplitter();
// Create splitter control
var splitterObj = $("#innerSplitter").data("ejSplitter");
splitterObj.expand(0); // expand the splitter control pane.
</script>
  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<script>
$("#innerSplitter").ejSplitter();
// expand the splitter control
$("#innerSplitter").ejSplitter("expand", 0);
</script>

    refresh()

    To refresh the splitter control pane resizing.

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<script>
$("#innerSplitter").ejSplitter();
// Create splitter control
var splitterObj = $("#innerSplitter").data("ejSplitter");
splitterObj.refresh(); // refresh the splitter control pane resizing.
</script>
  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<script>
$("#innerSplitter").ejSplitter();
// refresh the splitter control
$("#innerSplitter").ejSplitter("refresh");
</script>

    removeItem(index)

    To remove a specified pane from the splitter control.

    Name Type Description
    index number index of pane.

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<script>
$("#innerSplitter").ejSplitter();
// Create splitter control
var splitterObj = $("#innerSplitter").data("ejSplitter");
splitterObj.removeItem(0); 
</script>
  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<script>
$("#innerSplitter").ejSplitter();
// expand the splitter control
$("#innerSplitter").ejSplitter("removeItem",0);
</script>

    Events

    beforeExpandCollapse

    Fires before expanding / collapsing the split pane of splitter control.

    Name Type Description
    argument Object Event parameters from splitter control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    collapsed Object returns collapsed pane details.
    expanded Object returns expanded pane details.
    model Object returns the splitter model.
    splitbarIndex number returns the current split bar index.
    type string returns the name of the event.

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//beforeExpandCollapse event for splitter control
$("#innerSplitter").ejSplitter({
   beforeExpandCollapse: function (args) {}
});
</script>

    clickOnExpander

    Triggered when we click on the template icon. (Note: This will work only when expanderTemplate is defined.)

    Name Type Description
    argument Object Event parameters from splitter control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the splitter model.
    type string returns the name of the event.
    targetElement Object returns the target element from which click action is triggered.

    Example

  • HTML
    • <div id="innerSplitter">
        <div>
        <div class="cont">Pane 1 </div>
        </div>
        <div>
        <div class="cont">Pane 2 </div>
        </div>
        </div> 
        <script>
        //create event for splitter control
        $("#innerSplitter").ejSplitter({
                expanderTemplate: '<img class="eimg" src="expander.png" alt="employee"/>',
                clickOnExpander: function(args)
                { });
        </script>

    create

    Fires when splitter control pane has been created.

    Name Type Description
    argument Object Event parameters from splitter control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the splitter model.
    type string returns the name of the event.

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//create event for splitter control
$("#innerSplitter").ejSplitter({
   create: function (args) {}
});
</script>

    destroy

    Fires when splitter control pane has been destroyed.

    Name Type Description
    argument Object Event parameters from splitter control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the splitter model.
    type string returns the name of the event.

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//destroy event for splitter control
$("#innerSplitter").ejSplitter({
   destroy: function (args) {}
});
</script>

    expandCollapse

    Fires when expand / collapse operation in splitter control pane has been performed successfully.

    Name Type Description
    argument Object Event parameters from splitter control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    collapsed Object returns collapsed pane details.
    expanded Object returns expanded pane details.
    model Object returns the splitter model.
    splitbarIndex number returns the current split bar index.
    type string returns the name of the event.

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//expandCollapse event for splitter control
$("#innerSplitter").ejSplitter({
   expandCollapse: function (args) {}
});
</script>

    resize

    Fires when resize in splitter control pane.

    Name Type Description
    argument Object Event parameters from splitter control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    prevPane Object returns previous pane details.
    nextPane Object returns next pane details.
    model Object returns the splitter model.
    splitbarIndex number returns the current split bar index.
    type string returns the name of the event.

    Example

  • HTML
    • <div id="innerSplitter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div> 
<script>
//resize event for splitter control
$("#innerSplitter").ejSplitter({
   resize: function (args) {}
});
</script>