RasterSplitter( parent, alignment, size )Implements a splitted panel that host two content areas which size can be adjusted by dragging the splitting line between the two.
The two panels or content areas of a splitter are identified with the numbers 1 and 2. Panel 1 always has fixed
size; Panel 2 occupies the remaining space. Panel 1 can be aligned to any of the sides of the splitter control. The splitter control takes all of the available space of its containing parent element.
The following code creates a splitter in the BODY element having a left panel(#1) measuring 200px and a right panel(#2) taking the remaining of the horizontal space. An existing DIV with
id="leftDiv" is dom-relocated inside the left panel, a list control is created, and placed in the right panel:
var splitter = new RasterSplitter( document.body, "left", 200 ); // 'leftDiv' is the id of a DIV element to move into the panel 1 splitter.setContent( 1, "leftDiv" ); // Create a list control and // place it panel 2 of the splitter var list = new RasterList( null, "grid" ); list.add( null, ICONS32.GRAPHICS, null, "Customize" ); list.add( null, ICONS32.ADDRESS_BOOK, null, "Addresses" ); list.add( null, ICONS32.ACCESSORIES, null, "Accessories" ); splitter.setContent( 2, list ); ... <div id='leftDiv'> This is the left panel content. </div>
One of the following: a string containing the ID
of a DOM element, a reference to a DOM element, or another
control object. If this argument is
|alignment||string||Alignment of panel 1. Use one of the following values: 'top', 'right, 'bottom', or 'left'. This argument is not case-sensitive.|
|size||number||Size of the splitter's panel 1.|