Splitters Example
This is an example of using JSLayout to create dynamic layouts, even when they are modified programmatically by JavaScript.
In this example, the two splitters are created by JavaScript on page load and attached to their respective panels. The calculate()
function of the LayoutManager
is called after setting up the layout, as usual. When a splitter is dragged, its content box dimension (width
or height
) are changed via CSS, and all that is needed is a subsequent call to the recalculate()
function to update the layout. Splitter's are just a sample of what's possible with a flexible layout.
There is one caveat with the vertical splitter: when any non-flexible horizontal child dimension of a horizontally-oriented box is changed, the minimum size of must be updated so that the content panel doesn't overflow or stay too wide. This is easily done by calling the updateOrientationMinima()
function of the layout manager.