ui.igSplitter

ui.igSplitter_image

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

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.ui.splitter-en.js

Inherits

  • dragDelta

    Type:
    number
    Default:
    3

    Specifies drag delta of the split bar. In order to start dragging "move", the mouse has to be moved specific distance from its original position.

    Code Sample

     
                        // Initialize
                        $('.selector').igSplitter({
                            dragDelta: 6
                        });
    
                        // Get
                        var delta = $('.selector').igSplitter("option", "dragDelta");
                     
  • height

    Type:
    enumeration
    Default:
    null

    Gets/Sets the height of the container.

    Members

    • null
    • Type:object
    • will fit the tree inside its parent container, if no other widths are defined.
    • string
    • The height width can be set in pixels (px) and percentage (%).
    • number
    • The height width can be set as a number in pixels.

    Code Sample

     
                        // Initialize
                        $('.selector').igSplitter({
                            height: "400px"
                        });
                        // Get
                        var height = $('.selector').igSplitter("option", "height");
                        // Set
                        $('.selector').igSplitter("option", "height", "400px");
                     
  • 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;
                               
  • 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
                        $(document).delegate(".selector", "igsplittercollapsed", 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
                        $(document).delegate(".selector", "igsplitterexpanded", 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
                        $(document).delegate(".selector", "igsplitterlayoutrefreshed", 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
                        $(document).delegate(".selector", "igsplitterlayoutrefreshing", 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
                        $(document).delegate(".selector", "igsplitterresizeended", 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
                        $(document).delegate(".selector", "igsplitterresizestarted", 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
                        $(document).delegate(".selector", "igsplitterresizing", function (evt, ui) {
                            // reference to igSplitter
                            ui.owner;
                        });
    
                        // Initialize
                        $(".selector").igSplitter({
                            resizing: function(evt, ui) {...}
                        });
                     
  • 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.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.