dock.js

Creates a draggable system of docking elements, grouped into columns.

Objects

OAT.Dock(div, numColumns)

Creates a dock inside div with numColumns columns.

Methods

OAT.Dock.addObject(colIndex, content, options)

Adds a new window to dock, to the column with index colIndex. This window contains content. Object options may contain:

• color - of border & header
• titleColor - font color in header
• title

Messages

OAT.MSG.DOCK_DRAG

Sent after dock window is dragged to another position. Contains object with old and new coordinates of the window(oldX,oldY,newX,newY).

OAT.MSG.DOCK_REMOVE

Sent after dock window is closed (removed). Contains the removed window object.

CSS classes

.dock

CSS class of the whole dock div.

.dock_blank

CSS class of the blank space that appears below when dock window is being dragged to another place.

.dock_column

CSS class of all dock columns.

.dock_column_n

CSS class specific to nth dock column.

.dock_window

CSS class of the dock window div (single item in the dock)

.dock_header

CSS class of the dock window header div

.dock_content

CSS class of the dock window content div

Example

var content = OAT.Dom.create("div");
content.innerHTML = "lorem ipsum :)"
var d = new OAT.Dock("parentDiv", 3);
d.addObject(0, content, {title:"Sample window"});