Extends: Object
Implements: Options
a Jx.Splitter creates two or more containers within a parent container and provides user control over the size of the containers. The split can be made horizontally or vertically.
A horizontal split creates containers that divide the space horizontally with vertical bars between the containers. A vertical split divides the space vertically and creates horizontal bars between the containers.
Copyright © 2008, DM Solutions Group Inc.
This file is licensed under an MIT style license
| Jx. | Extends: Object |
| Properties | |
| domObj | {HTMLElement} the element being split |
| elements | {Array} an array of elements that are displayed in each of the split areas |
| bars | {Array} an array of the bars between each of the elements used to resize the split areas. |
| firstUpdate | {Boolean} track the first resize event so that unexposed Jx things can be forced to calculate their size the first time they are exposed. |
| Options | |
| useChildren | {Boolean} if set to true, then the children of the element to be split are used as the elements. |
| splitInto | {Integer} the number of elements to split the domObj into. |
| elements | {Array} an array of elements to put into the split areas. |
| containerOptions | {Array} an array of objects that provide options for the Jx.Layout constraints on each element. |
| barOptions | {Array} an array of object that provide options for the bars, this array should be one less than the number of elements in the splitter. |
| layout | {String} either ‘horizontal’ or ‘vertical’, indicating the direction in which the domObj is to be split. |
| snaps | {Array} an array of objects which can be used to snap elements open or closed. |
| barTooltip | the tooltip to display when the mouse hovers over a split bar, used for i18n. |
| onStart | an optional function to call when a bar starts dragging |
| onFinish | an optional function to call when a bar finishes dragging |
| Constructor | |
| Jx. | Create a new instance of Jx.Splitter |
| Functions | |
| prepareElement | Prepare a new, empty element to go into a split area. |
| prepareBar | Prepare a new, empty bar to go into between split areas. |
| establishConstraints | Setup the initial set of constraints that set the behaviour of the bars between the elements in the split area. |
| dragHorizontal | In a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar. |
| dragVertical | In a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar. |
| sizeChanged | handle the size of the container being changed. |
| horizontalResize | Resize a horizontally layed-out container |
| verticalResize | Resize a vertically layed out container. |
{Integer} the number of elements to split the domObj into. If not set, then the length of the elements option is used, or 2 if elements is not specified. If splitInto is specified and elements is specified, then splitInto is used. If there are more elements than splitInto specifies, then the extras are ignored. If there are less elements than splitInto specifies, then extras are created.
{Array} an array of objects that provide options for the Jx.Layout constraints on each element.
{Array} an array of object that provide options for the bars, this array should be one less than the number of elements in the splitter. The barOptions objects can contain a snap property indicating that a default snap object should be created in the bar and the value of ‘before’ or ‘after’ indicates which element it snaps open/shut.
Create a new instance of Jx.Splitter
| domObj | {HTMLElement} the element or id of the element to split |
| options | Jx.Splitter.Options |
Prepare a new, empty element to go into a split area.
prepareElement: function()
Prepare a new, empty bar to go into between split areas.
prepareBar: function()
Setup the initial set of constraints that set the behaviour of the bars between the elements in the split area.
establishConstraints: function()
In a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar.
dragHorizontal: function( obj )
In a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar.
dragVertical: function( obj )
handle the size of the container being changed.
sizeChanged: function()
Resize a horizontally layed-out container
horizontalResize: function()
Resize a vertically layed out container.
verticalResize: function()