Nav <div> format
Table of contents
- 1. All nodes
- 1.1. class Values
- 1.2. childData/siblingData Values
- 1.3. Left Icon
- 1.4. Right Icon
- 2. Home node
- 3. Mid docked node
- 4. Last docked node
- 5. Sibling node
- 6. Selected child node
- 7. Selected node
All nodes
All nodes have the following attributes:
| Attribute |
Description |
| class | (see below) |
| id |
node ID (e.g. "nav_5") |
| childNodes | comma separated list of immediate child node IDs |
| siblings | comma separated list of all siblings node IDs |
| parent | node ID of parent |
| path | full path to node (e.g., path="/123/456") |
| childData | [0,1, ID of single child] |
| siblingData | [0,1] |
class Values
childNode: indicates node is a child node and has options available to it (change background color, etc).closeNode: indicate node is hidden (used for all nodes returned in partial results)
dockedNode: provides style for all ancestor nodes
homeNode: indicates node is the home nodelastDocked: indicates node is the last ancestor node
node: common to all nodes
parentClosed: necssary for consistency of all docked nodes
parentOpen: indicates children are visible
selected: indicates node is a the currently selected node. Background color is white.
selectedChild: indicates node is a child of the currently selected node. Background color is a light shade and node is indented to reflect this.
sibling: indicates node is one of the immediate children of the last ancestor. Used for style and animation purposes.
childData/siblingData Values
0: No data
1: Full data or none exist (e.g., home node would have siblings set to 1 because it has no siblings)
[ID]: Only that node is known
Note: siblings and parent attributes are not necessary for the home node.
Left Icon
All nodes have the following image tag immediately preceding the node text:
<img class="nodeImage" src="[home.gif, docked-node.gif, parent-open.gif, parent-closed.gif, node-trans.gif]" />
| Image Name |
Purpose |
| home.gif | house icon, indicating home node |
| docked-node.gif | page with up arrow, indicating node is an ancestor |
| parent-open.gif | down arrow, indicating children are visible |
| parent-closed.gif | right arrow, indicating node has children, but they are hidden |
| node-trans.gif | invisible gif, indicating node has no children |
Home node
Example:
<div class="node dockedNode homeNode parentClosed" id="nav" childNodes="nav_1,nav_2,nav_3" path="" childData="nav_1" siblingData="1">
<a href="javascript:void(0)"><img class="nodeImage" src="home.gif" />MindTouch Deki</a>
</div>
Classes:
node: common to all nodes
dockedNode: provides style for all ancestor nodes
homeNode: indicates node is the home node
parentClosed: necssary for consistency of all docked nodes
Mid docked node
Example:
<div class="node dockedNode parentClosed" parent="nav" id="nav_1" siblings="nav_2,nav_3" childNodes="nav_1_1,nav_1_2,nav_1_3" path="" childData="nav_2" siblingData="0">
<a href="javascript:void(0)"><img class="nodeImage" src="docked-node.gif" />Root 1</a>
</div>
Classes:
node: common to all nodes
dockedNode: provides style for all ancestor nodes
parentClosed: indicates node has children, but they are not currently visible
Last docked node
Example:
<div class="node dockedNode lastDocked parentClosed" parent="nav" id="nav_1" siblings="nav_2,nav_3" childNodes="nav_1_1,nav_1_2,nav_1_3" path="" childData="1" siblingData="0">
<a href="javascript:void(0)"><img class="nodeImage" src="docked-node.gif" />Root 1</a>
</div>
Classes:
node: common to all nodes
dockedNode: provides style for all ancestor nodes
lastDocked: indicates node is the last ancestor node
parentClosed: indicates node has children, but they are not currently visible
Sibling node
Example:
<div class="node childNode sibling parentClosed" id="nav_1_1" siblings="nav_1_2,nav_1_3" childNodes="nav_1_1_1,nav_1_1_2" path="" childData="0" siblingData="1">
<a href="javascript:void(0)"><img class="nodeImage" src="parent-closed.gif" />Page 1</a>
</div>
Classes:
node: common to all nodes
childNode: indicates node is a child node and has options available to it (change background color, etc).
sibling: indicates node is one of the immediate children of the last ancestor. Used for style and animation purposes.
parentClosed: indicates node has children, but they are not currently visible
Selected child node
Example:
<div class="node childNode selectedChild" parent="nav_1_2" id="nav_1_2_2" path="" childData="1" siblingData="1">
<a href="javascript:void(0)"><img class="nodeImage" src="node-trans.gif" />Page 2.2</a>
</div>
Classes:
node: common to all nodes
childNode: indicates node is a child node and has options available to it (change background color, etc).
selectedChild: indicates node is a child of the currently selected node. Background color is a light shade and node is indented to reflect this.
Selected node
Example:
<div class="node childNode sibling selected parentOpen" parent="nav_1" id="nav_1_2" siblings="nav_1_1,nav_1_3" childNodes="nav_1_2_1,nav_1_2_2" path="" childData="1" siblingData="1">
<a href="javascript:void(0)"><img class="nodeImage" src="parent-open.gif" />Page 2</a>
</div>
Classes:
node: common to all nodes
childNode: indicates node is a child node and has options available to it (change background color, etc).
sibling: indicates node is one of the immediate children of the last ancestor. Used for style and animation purposes.
selected: indicates node is a the currently selected node. Background color is white.
parentOpen: indicates children are visible
- Tag page
-
- What links here
