dbx manual

Setting up the HTML

The script does not create the stuctures, it attaches behaviors to existing HTML elements, identified by their class name. There are four basic classes:

"dbx-group"

The vertical or horizontal container elements around each group of docking boxes (groups)

"dbx-box"

The docking box elements themselves (boxes)

"dbx-handle"

The element within each box which can be grabbed with the mouse in order to move it (handles); this is also where the buttons which control the open/close behavior(toggles) are inserted, and if used, these toggles are the event-anchor for keyboard navigation.

If toggles are not used, the script will attempt to use the handle itself as the anchor for keyboard navigation; so if you're doing that, the handle should be a focussable element, such as a link or form-element.

"dbx-content"

The optional content area within each box (content) which is controlled by the show/hide behavior.

Each group container must also have a unique ID, so the overall structure would look something like this:

• Skip code example

<element class="dbx-group" id="something">
	
	<element class="dbx-box">
		<element class="dbx-handle">...</element>
		<element class="dbx-content">
			...
		</element>
	</element>

	<element class="dbx-box">
		<element class="dbx-handle">...</element>
		<element class="dbx-content">
			...
		</element>
	</element>

</element>

And so on. You can have any number of groups, and any number of boxes within each group (except none). The content area is optional, and may not be required for many uses.

There are no restrictions on what core elements you can use here, except: all core elements must be block-level (or have block display); the script will enforce this.

Writing the CSS framework →