jQuery 3-pane Splitter

# 3-Pane Splitter Layout

Here is a typical 3-pane layout with the splitter occupying all the area below this header. The page scroll bars have been removed since all the content is inside the splitter, and the splitter is anchored to the bottom of the window using an onresize event handler.

See the splitter documentation

This is the left pane of the 3-pane splitter. It has been limited to a range of 100 to 300 pixels wide with the minA/maxA properties of the plugin. It starts at 150 pixels wide because of the #LeftPane's width property.

Essentially, a 3-pane splitter is just a vertical splitter with a horizontal splitter nested in the right-hand side. This same technique can be used to create multiple vertical and/or horizontal splitter layouts.

This is the top-right part of the 3-pane splitter. It starts at 150 pixels because the height of #TopPane was set in the stylesheet. The stylesheet has also set `min-height: 75px` so it can't get any smaller than that.

The splitbars are keyboard-accessible. Use `Alt-Shift-I` to select the vertical splitbar, or `Alt-Shift-H` for the horizontal one. Then use the arrow keys to move the bar. The plugin lets you specify any key for the access key, but be sure to test on all browsers in case they reserve those keystrokes.

This is the bottom-right part of the 3-pane splitter. It can't get any smaller than 100 pixels tall--because the stylesheet says so, that's why.

Notice that the #MySplitter element is set to `min-width: 400px`, so some of the splitter will be out of sight if you try to resize the browser window too narrowly. Similarly, it has `min-height: 300px` so the splitter won't perform an impossible act--like setting itself to a negative height if window is resized above the top of the splitter!