mcUIControls mcUISplitter

A splitter is a user interface component placed between two panels so that the user can adjust their sizes.

This example uses a table to hold two panels and a vertical splitter between them because a table will restrict the width of the panels.

This colors the splitter bar - this would normally be colored via the background, not this.

<style>

.mcUISplitter_Vert {
  background-color:#ece9d8;
}

</style>

Another vertical test - using sunken panels. There is an extra slightly larger outside div to provide the background color.

Test of horizontal panels - the dark grey color was just to help set the sizes

The initial splitter bar position is set via height:250px in the first panel

The min and max positions of the splitter default to 50px from either extreme.

If the actual height or width of the first (left or top) panel is less than the default, then that is used as the default.

In this testcase, the first panel does not set a default width.

In this testcase, the first panel does not set a default height.

Four div's define
- The container - must set the height and width
- The left or top panel
- The splitter
- The right or bottom panel
None of the div's need id's to work
The div's must be logically adjacent with the splitter between the 2 panels
Everything is triggered via the splitter class - either mcUISplitter_Vert or mcUISplitter_Horz
The height and width of the panels is automatically controlled based on the size of the container div
Either the height or width of the first (left or top) panel can be set for the initial layout
Once the correct libraries are included, everything is automatically configured
The fifth outside div used in some of the examples was used just to provide a background color
As a result, it is slightly larger than the main container

If you want to manually set the min and max values for the splitter, use code like this

document.getElementById("splitter_ID").min =  30;
document.getElementById("splitter_ID").max = 230;

Adding a parameter to set this automatically would require too much testing.

These are the required libraries - mcUISplitter.js creates it own stylesheet.

Some comments about the w3Schools splitter used on most example pages.