%META:TOPICPARENT{name="OATDOCIndex"}%
---+ dock.js

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

%TOC%

---++ Objects

---+++ OAT.Dock(div, numColumns)

Creates a dock inside <tt>div</tt> with <tt>numColumns</tt> columns.

---++ Methods

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

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

   * <tt>*color*</tt> - of border & header
   * <tt>*titleColor*</tt> - font color in header
   * <tt>*title*</tt> 

---++ 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.

---+++ .<nowiki>dock_column_n</nowiki>

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

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

CategoryDocumentation CategoryOAT CategoryOpenSource