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.


Name Type   Description
parent object 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 null, the control is created but not attached to the DOM tree; setParent() must be invoked later to specify the parent control.
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.

See Also

Home Examples Download License
Copyright © 2010-2017 Edwin R. López