SplitPane Control :: YUI

One of the basic controls is the split pane control. YUI doesn't have one right out of the box. So, we'll build one.

Note that Jack Slocum created one based on YUI about a year ago for his ExtJS library. He called his a "SplitBar Component."

Of course, Bindows has a **pure** JavaScript one.

We'll base ours off of the YAHOO.widget.Slider. We'll take advantage of its ability to slide horizontally and vertically. This also means that whatever YUI pieces that the YAHOO.widget.Slider uses, we'll use those as well.

Here it is in action --



Like the YAHOO.widget.Slider, we'll retrieve a horizontal and vertical split pane by doing it the static way --

var horzSplitPane = MySplitPane.getHorizSplitPane("SliderBg", "Thumb", 145, 200, "LeftContainer", "RightContainer");

var vertSplitPane = MySplitPane.getVertSplitPane("SliderBg", "Thumb", 194, 250, "TopContainer", "BottomContainer");

So, we'll mimic the YAHOO.widget.Slider API --

var horzSlider = YAHOO.widget.Slider.getHorizSlider(sBGElId, sHandleEId, iLeft, iRight);

var verSlider = YAHOO.widget.Slider.getVertSlider(sBGElId, sHandleEId, iUp, iDown);

With the exception of the additional two panels, we'll keep the arguments the same. Leveraging what YUI users already know allows them to easily learn your API.

We'll use these two methods to get the split panes --

MySplitPane.getHorizSplitPane(sBGElId, sHandleEId, iLeft, iRight, leftContainer, rightContainer)

MySplitPane.getVertSplitPane(sBGElId, sHandleEId, iUp, iDown, topContainer, bottomContainer)

where

• sBGElId is the ID of the slider background
• sHandleEId is the ID of the slider thumb
• iLeft/iUp is the number of pixels the slider can move left or up
• iRight/iDown is the number of pixels the slider can move right or down
• leftContainer/topContainer is the ID of the left or top pane
• rightContainer/bottomContainer is the ID of the right or bottom pane

The actual augmentation isn't based on prototype inheritance. MySplitPane is really a wrapper around the getHorzSlider and getVertSlider methods --



Each method, getHorzSplitPane and getVertSplitPane, is treated as an object in an object literal which is returned within the Singleton method/object MySplitPane. The end result are two public methods.

We subscribe to the "change" event which through the handler, handleChange, resizes the panels.

You of course can add more functionality by subscribing to your own "change" event and then using the handler to do something else like update the text in the panels --



Two of the more interesting utility methods are YAHOO.util.Dom.setStyle and YAHOO.util.Dom.getStyle. They're used instead of node.style so that you can get "style" name/value pairs even if they're not defined inline or via JavaScript.

The YUI documentation notes that getStyle "normalizes currentStyle and ComputedStyle."

That's it!

You can view MySplitPane here. Visual examples for everything above are found here and here.

Feel free to use or modify the code.

Have lotsa fun!