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 original position.

    Code Sample

      
                $("#splitter").igSplitter({
                    dragDelta: 0
                });
          
  • height

    Type:
    enumeration
    Default:
    null

    Gets sets how the height of the control can be set.

    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

      
                $("#splitter").igSplitter({
                    height: "75%"
                });
    
                //Get
                var height = $("#splitter").igSplitter('option', 'height');
                
                //Set
                $("#splitter").igSplitter('option', 'height', 200);
          
  • orientation

    Type:
    enumeration
    Default:
    vertical

    Specifies the orientation of the splitter.

    Members

    • vertical
    • Type:string
    • horizontal
    • Type:string

    Code Sample

      
                $("#splitter").igSplitter({
                    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}
                    ]
                });
          
    • collapsed

      Type:
      bool
      Default:
      false

      Gets sets whether the panel is initially collapsed.

    • collapsible

      Type:
      bool
      Default:
      false

      Gets sets whether the panel can be collapsed.

    • max

      Type:
      enumeration
      Default:
      null

      Gets sets the maximum size that the panel can have.

    • min

      Type:
      enumeration
      Default:
      null

      Gets sets the minimum size that the panel can have.

    • resizable

      Type:
      bool
      Default:
      false

      Gets sets whether the panel can be resized.

    • size

      Type:
      enumeration
      Default:
      null

      Gets sets the size of the panel.

  • resizeOtherSplitters

    Type:
    bool
    Default:
    true

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

  • width

    Type:
    enumeration
    Default:
    null

    Gets sets how the width of the control can be set.

    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

      
                $("#splitter").igSplitter({
                    width: "25%"
                });
                
                //Get
                var width = $("#splitter").igSplitter('option', 'width');
                
                //Set
                $("#splitter").igSplitter('option', 'width', 800);
          

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 collased panel.

    Code Sample

      
            //Bind
            $(document).delegate(".selector", "igsplittercollapsed", function (evt, ui) {
                //return reference to igSplitter
                ui.owner;
                // return index of 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) {
                //return reference to igSplitter
                ui.owner;
                // return index of 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 going to go 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) {
                //return 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) {
                //return 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) {
                //return 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" );

    Destructor.

    Code Sample

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

    .igSplitter( "expandAt", index:object );

    Expand the specified panel.

    • 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" );

    You can refresh layout after the splitter is rendered in order to render it correctly.

    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.

#