Adobe 38040334 - Dreamweaver CS3 User Manual page 93

DREAMWEAVER CS3 87
Extending Dreamweaver
Manipulating content within a tree control
Tree controls and the nodes within them are implemented as HTML tags. They are parsed by Dreamweaver and
stored in the document tree. These tags can be manipulated in the same way as any other document node. For more
information on functions and methods, see "The Dreamweaver Document Object Model" on page 90.
DOM
To add a node to an existing tree control programmatically, set the property of the
Adding nodes
innerHTML
tag or one of the existing tags. Setting the property of a tree node
MM:TREECONTROL MM:TREENODE inner HTML
creates a nested node.
The following example adds a node to the top level of a tree:
var tree = document.myTreeControl;
//add a top-level node to the bottom of the tree
tree.innerHTML = tree.innerHTML + '<mm:treenode name="node3" value="node3">';
To add a child node to the currently selected node set the property of the selected
Adding a child node
innerHTML
node.
The following example adds a child node to the currently selected node:
var tree = document.myTreeControl;
var selNode = tree.selectedNodes[0];
//deselect the node, so we can select the new one
selnode.removeAttribute("selected");
//add the new node to the top of the selected node's children
selNode.innerHTML = '<mm:treenode name="item10" value="New item11" expanded selected>' + ¬
selNode.innerHTML;
To delete the currently selected node from the document structure, use the or
Deleting nodes
innerHTML
properties.
outerHTML
The following example deletes the entire selected node and any children:
var tree = document.myTreeControl;
var selNode = tree.selectedNodes[0];
selNode.outerHTML = "";
A color button control for extensions
In addition to the standard input types such as text, check box, and button, Dreamweaver supports ,
mmcolorbutton
an additional input type in extensions.
Specifying in your code causes a color picker to appear in the UI. You can set the
<input type="mmcolorbutton">
default color for the color picker by setting a value attribute on the input tag. If you do not set a value, the color picker
appears grey by default and the value property of the input object returns an empty string.
The following example shows a valid tag:
mmcolorbutton
<input type="mmcolorbutton" name="colorbutton" value="#FF0000">
<input type="mmcolorbutton" name="colorbutton" value="teal">
A color button has one event, , which is triggered when the color changes.
onChange
You might want to keep a text box and a color picker synchronized. The following example creates a text box that
synchronizes the color of the text box with the color of the color picker:
<input type = "mmcolorbutton" name="fgcolorPicker"
onChange="document.fgcolorText.value=this.value">
<input type = "test" name="fgcolorText" onBlur="document.fgColorPicker.value=this.value">