Note that Jack Slocum created one based on YUI about a year ago for his ExtJS library. He called his a "SplitBar Component."
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)
- 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
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 --
The YUI documentation notes that getStyle "normalizes currentStyle and ComputedStyle."
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!